Tornado Logo

Tabs System - Tornado UI v2

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 classes 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 nametabs then inside of it you create a tabs menu list and give it a class name tabs-menu and inside of 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 container 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
  • Second Tab
  • Third Tab
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 dialog-tabs to the tabs container see the example below

  • First Tab
  • Second Tab
  • Third Tab
First Tab Content
Second Tab Content
Third Tab Content
<!-- 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

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

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

Tabs Lined Theme

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

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

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

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.