Tabs Vue Component

Tabs Vue Component

Tabs Components
Tabs Properties
Tabs Methods
Tabs Events
Switch Tabs
Examples
Static Tabs
Animated Tabs
Swipeable Tabs

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

Tabs Components

There are following components included:

**f7-tabs**
**f7-tab**

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

Static Tabs

<f7-page :page-content="false">
  <f7-navbar title="Static Tabs" back-link="Back"></f7-navbar>
  <f7-toolbar tabbar bottom>
    <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
    <f7-link tab-link="#tab-2">Tab 2</f7-link>
    <f7-link tab-link="#tab-3">Tab 3</f7-link>
  </f7-toolbar>
  <f7-tabs>
    <f7-tab id="tab-1" class="page-content" tab-active>
      <f7-block>
        <p>Tab 1 content</p>
        ...
      </f7-block>
    </f7-tab>
    <f7-tab id="tab-2" class="page-content">
      <f7-block>
        <p>Tab 2 content</p>
        ...
      </f7-block>
    </f7-tab>
    <f7-tab id="tab-3" class="page-content">
      <f7-block>
        <p>Tab 3 content</p>
        ...
      </f7-block>
    </f7-tab>
  </f7-tabs>
</f7-page>

Animated Tabs

<f7-page :page-content="false">
  <f7-navbar title="Animated Tabs" back-link="Back"></f7-navbar>
  <f7-toolbar tabbar bottom>
    <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
    <f7-link tab-link="#tab-2">Tab 2</f7-link>
    <f7-link tab-link="#tab-3">Tab 3</f7-link>
  </f7-toolbar>
  <f7-tabs animated>
    <f7-tab id="tab-1" class="page-content" tab-active>
      <f7-block>
        <p>Tab 1 content</p>
        ...
      </f7-block>
    </f7-tab>
    <f7-tab id="tab-2" class="page-content">
      <f7-block>
        <p>Tab 2 content</p>
        ...
      </f7-block>
    </f7-tab>
    <f7-tab id="tab-3" class="page-content">
      <f7-block>
        <p>Tab 3 content</p>
        ...
      </f7-block>
    </f7-tab>
  </f7-tabs>
</f7-page>

Swipeable Tabs

<f7-page :page-content="false">
  <f7-navbar title="Swipeable Tabs" back-link="Back"></f7-navbar>
  <f7-toolbar tabbar bottom>
    <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
    <f7-link tab-link="#tab-2">Tab 2</f7-link>
    <f7-link tab-link="#tab-3">Tab 3</f7-link>
  </f7-toolbar>
  <f7-tabs swipeable>
    <f7-tab id="tab-1" class="page-content" tab-active>
      <f7-block>
        <p>Tab 1 content</p>
        ...
      </f7-block>
    </f7-tab>
    <f7-tab id="tab-2" class="page-content">
      <f7-block>
        <p>Tab 2 content</p>
        ...
      </f7-block>
    </f7-tab>
    <f7-tab id="tab-3" class="page-content">
      <f7-block>
        <p>Tab 3 content</p>
        ...
      </f7-block>
    </f7-tab>
  </f7-tabs>
</f7-page>