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

PropTypeDescription
<f7-tabs> properties
animatedbooleanEnables animated tabs
swipeablebooleanEnables swipeable tabs
routablebooleanEnables routable tabs
swiper-paramsobjectObject with Swiper parameters (applies if swipeable enabled)
<f7-tab> properties
tab-activebooleanDefines currently active/visible tab
idstringTab ID

Tabs Methods

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

Tabs Events

EventDescription
<f7-tab> events
tab:showEvent will be triggered when Tab becomes visible/active
tab:hideEvent will be triggered when Tab becomes invisible/inactive

Switch Tabs

You can control/switch 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>