Tabs allow to simply switch between different content. Tabs Vue component represents Tabs component.
<f7-tabs>
<f7-tab id="tab1" active>Tab 1 content...</f7-tab>
<f7-tab id="tab2">Tab 2 content...</f7-tab>
</f7-tabs>
Renders to:
<div class="tabs">
<div id="tab1" class="tab acitive">Tab 1 content...</div>
<div id="tab2" class="tab">Tab 2 content...</div>
</div>
<f7-tabs animated>
<f7-tab id="tab1" active>Tab 1 content...</f7-tab>
<f7-tab id="tab2">Tab 2 content...</f7-tab>
</f7-tabs>
Renders to:
<div class="tabs-animated-wrap">
<div class="tabs">
<div id="tab1" class="tab acitive">Tab 1 content...</div>
<div id="tab2" class="tab">Tab 2 content...</div>
</div>
</div>
</div>
<f7-tabs swipeable>
<f7-tab id="tab1" active>Tab 1 content...</f7-tab>
<f7-tab id="tab2">Tab 2 content...</f7-tab>
</f7-tabs>
Renders to:
<div class="tabs-swipeable-wrap">
<div class="tabs">
<div id="tab1" class="tab acitive">Tab 1 content...</div>
<div id="tab2" class="tab">Tab 2 content...</div>
</div>
</div>
Prop | Type | Description |
---|---|---|
<f7-tabs> properties | ||
animated | boolean | Enables animated tabs |
swipeable | boolean | Enables swipeable tabs |
<f7-tab> properties | ||
active | boolean | Defines currently active/visible tab |
.show(animated) | Show tab |
Event | Description |
---|---|
tab:show | Event will be triggered when Tab becomes visible/active |
tab:hide | Event will be triggered when Tab becomes invisible/inactive |
You can control/switch tabs:
tab-link
prop