Get Started
React 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 React Component

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

Tabs Components

There are following components included:

Tabs / F7Tabs
Tab / F7Tab

Tabs Properties

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

Tabs Methods

<Tab> methods
.show(animate)	Show this tab

Tabs Events

Event	Description
<Tab> events
tabShow	Event will be triggered when Tab becomes visible/active
tabHide	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 tabLink prop
using Tabs API
using Routable Tabs

Examples

Static Tabs

<Page pageContent={false}>
  <Navbar title="Static Tabs" backLink="Back"></Navbar>
  <Toolbar tabbar>
    <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
    <Link tabLink="#tab-2">Tab 2</Link>
    <Link tabLink="#tab-3">Tab 3</Link>
  </Toolbar>
  <Tabs>
    <Tab id="tab-1" className="page-content" tabActive>
      <Block>
        <p>Tab 1 content</p>
        ...
      </Block>
    </Tab>
    <Tab id="tab-2" className="page-content">
      <Block>
        <p>Tab 2 content</p>
        ...
      </Block>
    </Tab>
    <Tab id="tab-3" className="page-content">
      <Block>
        <p>Tab 3 content</p>
        ...
      </Block>
    </Tab>
  </Tabs>
</Page>

Animated Tabs

<Page pageContent={false}>
  <Navbar title="Animated Tabs" backLink="Back"></Navbar>
  <Toolbar tabbar>
    <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
    <Link tabLink="#tab-2">Tab 2</Link>
    <Link tabLink="#tab-3">Tab 3</Link>
  </Toolbar>
  <Tabs animated>
    <Tab id="tab-1" className="page-content" tabActive>
      <Block>
        <p>Tab 1 content</p>
        ...
      </Block>
    </Tab>
    <Tab id="tab-2" className="page-content">
      <Block>
        <p>Tab 2 content</p>
        ...
      </Block>
    </Tab>
    <Tab id="tab-3" className="page-content">
      <Block>
        <p>Tab 3 content</p>
        ...
      </Block>
    </Tab>
  </Tabs>
</Page>

Swipeable Tabs

<Page pageContent={false}>
  <Navbar title="Swipeable Tabs" backLink="Back"></Navbar>
  <Toolbar tabbar>
    <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
    <Link tabLink="#tab-2">Tab 2</Link>
    <Link tabLink="#tab-3">Tab 3</Link>
  </Toolbar>
  <Tabs swipeable>
    <Tab id="tab-1" className="page-content" tabActive>
      <Block>
        <p>Tab 1 content</p>
        ...
      </Block>
    </Tab>
    <Tab id="tab-2" className="page-content">
      <Block>
        <p>Tab 2 content</p>
        ...
      </Block>
    </Tab>
    <Tab id="tab-3" className="page-content">
      <Block>
        <p>Tab 3 content</p>
        ...
      </Block>
    </Tab>
  </Tabs>
</Page>