Tabs Vue Component

Tabs allow to simply switch between different content. Tabs Vue component represents Tabs component.

Tabs Components

There are following components included:

• f7-tabs
• f7-tabFAB

Tabs Properties

Prop	Type	Description
<f7-tabs> properties
animated	boolean	Enables animated tabs
swipeable	boolean	Enables swipeable tabs
routable	boolean	Enables routable tabs
<f7-tab> properties
tab-active	boolean	Defines currently active/visible tab
id	string	Tab ID

Tabs Methods

<f7-tab> methods
.show(animate)	Show this tab

Tabs Events

Event	Description
<f7-tab> events
tab:show	Event will be triggered when Tab becomes visible/active
tab:hide	Event will be triggered when Tab becomes invisible/inactive

Switch Tabs

You can control/switch tabs:

• by clicking on Button or Link specifying related tab's ID using tab-link prop
• using Tabs API
• using Routable Tabs

Examples

<f7-tabs>
  <f7-tab id="tab1" tab-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 tab-active">Tab 1 content...</div>
  <div id="tab2" class="tab">Tab 2 content...</div>
</div>

Animated tabs

<f7-tabs animated>
  <f7-tab id="tab1" tab-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 tab-active">Tab 1 content...</div>
    <div id="tab2" class="tab">Tab 2 content...</div>
  </div>
</div>
</div>

Swipeable tabs

<f7-tabs swipeable>
  <f7-tab id="tab1" tab-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 tab-active">Tab 1 content...</div>
    <div id="tab2" class="tab">Tab 2 content...</div>
  </div>
</div>