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.
<!-- 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
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
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