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