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