.toolbar {
height: 10vh;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
background-color: var(--black-bg) !important;
i {
color: white;
}
.tabbar-label {
color: white;
}
.tab-link-active {
background-color: white;
border-radius: 30px;
.tabbar-label {
color: var(--chili);
}
i {
color: var(--chili);
}
}
}
<div class="toolbar toolbar-bottom tabbar-icons">
<div class="toolbar-inner">
<a href="#view-home" class="tab-link tab-link-active">
<i class="icon f7-icons if-not-md">house_fill</i>
<i class="icon material-icons if-md">home</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#view-catalog" class="tab-link">
<i class="icon f7-icons if-not-md">square_list_fill</i>
<i class="icon material-icons if-md">view_list</i>
<span class="tabbar-label">Catalog</span>
</a>
<a href="#view-settings" class="tab-link">
<i class="icon f7-icons if-not-md">gear</i>
<i class="icon material-icons if-md">settings</i>
<span class="tabbar-label">Settings</span>
</a>
<a href="#view-settings" class="tab-link">
<i class="icon f7-icons if-not-md">gear</i>
<i class="icon material-icons if-md">settings</i>
<span class="tabbar-label">Settings</span>
</a>
<a href="/fav/" class="tab-link">
<i class="icon f7-icons if-not-md">gear</i>
<i class="icon material-icons if-md">settings</i>
<span class="tabbar-label">Favoritos</span>
</a>
</div>
</div>
I am currently developing an app using F7, i have a toolbar ( the bottom menu) , what i want to achieve is, when i the active page changes, the background color from the previous item slides to the new active page indicator.
This is an example of what i am trying to achieve:
https://www.jqueryscript.net/menu/sliding-active-nav-item-indicator.html
Yet, this does not work with F7
This is my first time attempting something like this