Tornado | Tabs

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

Sass Customize

in order to edit the Tabs you can use the css class's to overide the theme or you can edit it with sass Tornado Folder/SCSS/components/_tabs-system.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Tabs Structure

in order to build tabs first you create a container and give it class name tabs then inside of it you create a tabs menu list and give it a class name tabs-menu and inside of it each tab take a data-tab attribute for identify the id of that tab content container after build your tabs menu create next to it or any where else a tabs content and give a class name tabs-wraper then create your tabs content each content element takes a class name tab-content and an id of the tab see the example below.

First Tab Content

Second Tab Content

Third Tab Content


<!-- 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 Javascript Call Backs

tornado tabs provide Two call back functions that you can apply with HTML data attributes and they work like this data-call-before="but Your Function Name Without ()" to Fire the Function Before Tab Panel Opens
data-call-after="but Your Function Name Without ()" to Fire the Function After Tab Panel Opens


<!-- Tabs Callback Functions -->
<ul class="tabs-menu">
    <li data-tab="first-tab" data-call-before="functionName">First Tab</li>
    <li data-tab="second-tab" data-call-after="functionName">Second Tab</li>
    <li data-tab="third-tab" data-call-before="functionName" data-call-after="functionName">Third Tab</li>
</ul>

Tabs Dialog Theme

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

First Tab Content

Second Tab Content

Third Tab Content

Tabs Tabular Theme

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

First Tab Content

Second Tab Content

Third Tab Content

Tabs Lined Theme

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

First Tab Content

Second Tab Content

Third Tab Content

Next Accourdions Previous Tooltips