-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Tabs React Component
Tabs allow to simply switch between different content. Tabs React component represents Tabs component.
Usage examples
<Tabs>
<Tab id="tab1" active>Tab 1 content...</Tab>
<Tab id="tab2">Tab 2 content...</Tab>
</Tabs>
Renders to:
<div class="tabs">
<div id="tab1" class="tab acitive">Tab 1 content...</div>
<div id="tab2" class="tab">Tab 2 content...</div>
</div>
Animated tabs
<Tabs animated>
<Tab id="tab1" active>Tab 1 content...</Tab>
<Tab id="tab2">Tab 2 content...</Tab>
</Tabs>
Renders to:
<div class="tabs-animated-wrap">
<div class="tabs">
<div id="tab1" class="tab acitive">Tab 1 content...</div>
<div id="tab2" class="tab">Tab 2 content...</div>
</div>
</div>
</div>
Swipeable tabs
<Tabs swipeable>
<Tab id="tab1" active>Tab 1 content...</Tab>
<Tab id="tab2">Tab 2 content...</Tab>
</Tabs>
Renders to:
<div class="tabs-swipeable-wrap">
<div class="tabs">
<div id="tab1" class="tab acitive">Tab 1 content...</div>
<div id="tab2" class="tab">Tab 2 content...</div>
</div>
</div>
Properties
Prop | Type | Description |
---|---|---|
<Tabs> properties | ||
animated | boolean | Enables animated tabs |
swipeable | boolean | Enables swipeable tabs |
<Tab> properties | ||
active | boolean | Defines currently active/visible tab |
Tab Methods
Tab Events
Event | Description |
---|---|
onTabShow | Event will be triggered when Tab becomes visible/active |
onTabHide | 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 its JavaScript API
- using Tab Routes