Tabs

Description

The tabs is a common component in tui, and it can be found in BIOS. There is an example about it in Examples page.

Code Examples

These are some examples for component:

<!-- Two tabs example -->
<div class="tui-tabs">
    <ul>
        <li><a class="tui-tab active" data-tab-content="tab-1-content">Tab 1</a></li>
        <li><a class="tui-tab" data-tab-content="tab-2-content">Tab 2</a></li>
    </ul>
</div>
<div id="tab-1-content" class="tui-tab-content">
    ...
</div>
<div id="tab-2-content" class="tui-tab-content">
    ...
</div>

Attributes

For this component there is an specified attribute. Use data-tui-content to reference the content element that will be showed when the tab get actived.

Component Classes

This is the table with available classes for this component.

Class	Description
.tui-tabs	Creates a tabs menu
.tui-tab	Creates a tab. Use data-tab-content attribute in the tag with the content element id
.active	Actives the tab. Use it for default tab selected
.tui-tab-content	Represents the element as the tab content