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 |
swiperParams | object | Object with Swiper parameters (applies if swipeable enabled) |
<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 bottom>
<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 bottom>
<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 bottom>
<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>