TABS COMPONENT

A tabs is a bunch of hidden section’s of content Switch between them by a menu.

TABS INITIALIZE

Tornado has Typescript Method to Activate tabs functionality you can call out the method like this Tornado.tabs(selector); and the selector must represent the tabs buttons class name then you can define the options that you want your tabs to preforms.

//=====> Import Tornado Methods <=====//
import Tornado from './Base/Tornado';

//====> Method Usage <====//
Tornado.tabs('.tabs-menu [data-tab]', {..options..});

TABS MARKUP

the tabs system works on specific HTML markup structure and its build to be like this a tabs wrapper contains each tabs buttons and tabs content the tabs buttons can be a ul list with the tab content id as data-tab attribute in li or can be links with the tab content id as href.

then the tabs content and that have to be in a wrapper called tabs-wraper then each tab content with class name tab-content and an id for it to be called and you can use class active on both the tab-content and tab-button to activate it on Initialize.

<!-- Tabs Container -->
<div class="tabs">
    <!-- Tabs Menu -->
    <ul class="tabs-menu">
        <li data-tab="first-tab">First Tab</li>
        <li data-tab="second-tab">Second Tab</li>
        <li data-tab="third-tab">Third Tab</li>
    </ul>

    <!-- Tabs Content's -->
    <div class="tabs-wraper">
        <!-- Tab Content -->
        <div class="tab-content" id="first-tab">First Tab Content</div>
        <!-- Tab Content -->
        <div class="tab-content" id="second-tab">Second Tab Content</div>
        <!-- Tab Content -->
        <div class="tab-content" id="third-tab">Third Tab Content</div>
    </div>
</div>
<!-- // Tabs Container -->

TABS OPTIONS

this a list of the tabs options and methods that you can use to configure and manipulate your tabs and keep in your mind that any call back function must pass button argument and tab argument to do stuff to them.

//====> Activate Tabs <====//
Tornado.tabs('.tabs-menu [data-tab]', {
    active   : 0,     //===> Activate Tab on init by [ index || ID ]
    hashOpen : true,  //===> Activate Tab by URL Hash [true || false]
    onChange : (btn,tab) => {  }, //===> While Tab Change Call Back Function
    onHide   : (btn,tab) => {  }, //===> When Tab Hide Call Back Function
    onShow   : (btn,tab) => {  }, //===> When Tab Shows Call Back Function
});

TABS CALLBACK METHODS

this an example of how to use the callback functions any call back function must pass button argument and tab argument to do stuff to them.

//====> Method Usage <====//
Tornado.tabs('.tabs-menu [data-tab]', {
    //===> While Tab Change Call Back Function
    onChange : (btn,tab) => {
       //===> Alert me With the Clicked Tab Button Content <===//
       alert(btn.textContent);

       //===> Alert me With the Activated Tab Content <===//
       alert(tab.textContent);
    }, 
});

TABS DIALOG THEME

in order to apply dialog theme on the tabs simply add class name dialog-tabs to the tabs container see the example below

<!-- Tabs Container -->
<div class="tabs dialog-tabs">
    <!-- Tabs Menu -->
    <ul class="tabs-menu">
        <li data-tab="first-tab">First Tab</li>
        <li data-tab="second-tab">Second Tab</li>
        <li data-tab="third-tab">Third Tab</li>
    </ul>

    <!-- Tabs Content's -->
    <div class="tabs-wraper">
        <!-- Tab Content -->
        <div class="tab-content" id="first-tab">First Tab Content</div>
        <!-- Tab Content -->
        <div class="tab-content" id="second-tab">Second Tab Content</div>
        <!-- Tab Content -->
        <div class="tab-content" id="third-tab">Third Tab Content</div>
    </div>
</div>
<!-- // Tabs Container -->

TABS TABULAR THEME

in order to apply Tabular theme on the tabs simply add class name tabular-tabs to the tabs container see the example below