Tabs Vue Component

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-tab

Tabs Properties

Prop	Type	Description
<f7-tabs> properties
animated	boolean	Enables animated tabs
swipeable	boolean	Enables swipeable tabs
routable	boolean	Enables routable tabs
swiper-params	object	Object with Swiper parameters (applies if `swipeable` enabled)
<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>

← Swiper

Text Editor →