Get Started
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List

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