I have a common tabbar as direct descendant of a f7-view:
<f7-view id="main-view" url="/" main>
<f7-toolbar tabbar labels>
<f7-link tab-link tab-link-active href="/home/" text="Home" route-tab-id="/home/"></f7-link>
<f7-link tab-link tabs-routable href="/more/" text="More" route-tab-id="/more/" ></f7-link>
</f7-toolbar>
When I click one of the links, the correct ‘page’ is loaded/shown, but the tab-link-active class is not set. (if I set the class in custom code, everything works; but I thought F7vue would do that automatically?
Is there something missing?
I am using single-file components and routes, etc… are set-up and work fine.
Any hint appreciated
xember
July 17, 2019, 9:44pm
2
I have the same issue… anyone?
<!-- Main View -->
<f7-view id="main-view" url="/login/" main class="safe-areas">
<f7-toolbar labels bottom tabbar>
<f7-link tab-link route-tab-id="tab-1" href="/schedule/" tab-link-active :text="language.button_bar.scheduling" icon-f7="calendar"></f7-link>
<f7-link tab-link route-tab-id="tab-2" href="/availability/" :text="language.button_bar.availability" icon-f7="check_round"></f7-link>
<f7-link tab-link route-tab-id="tab-3" href="/trade/" :text="language.button_bar.trade" icon-ios="material:compare_arrows"></f7-link>
<f7-link tab-link route-tab-id="tab-4" href="/timeoff/" :text="language.button_bar.timeoff" icon-f7="timer"></f7-link>
</f7-toolbar>
<f7-tabs>
<f7-tab id="tab-1" class="page-content"></f7-tab>
<f7-tab id="tab-2" class="page-content"></f7-tab>
<f7-tab id="tab-3" class="page-content"></f7-tab>
<f7-tab id="tab-4" class="page-content"></f7-tab>
</f7-tabs>
</f7-view>