-
Notifications
You must be signed in to change notification settings - Fork 69
Tabs
Vinicius Reif Biavatti edited this page Jan 3, 2021
·
9 revisions
The tabs is used to hide some content, and to allow the uses select the content he wants to check. An example of the usage of it can be found in the BIOS example. Check also the Examples page to see how it works.
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>
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.
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 |
Copyright © 2022 Vinícius Reif Biavatti
- Home
- Getting Started
- Examples
- Custom Theme
- Contributing
- Showcase
- Components
- Styles