Tabset
Tabset component that by default allows the content to take up any space necessary.
Tabs does not include borders around them to be more flexible. If you want borders you
can use the following colors (same as for dividers) or any other color:
- Default - fade(@greyscale-0, 10) or rgba(0, 0, 0, 0.1)
- Inverse - fade(@greyscale-100, 15) or rgba(255, 255, 255, 0.15)
-
Tab
-
Tab with aside
-
Active
-
Pressed
-
Hover
-
Disabled
<ul class="lui-tabset" style="border: 1px solid rgba(0, 0, 0, 0.1);">
<li class="lui-tab">
<span class="lui-tab__text">Tab</span>
</li>
<li class="lui-tab">
<span class="lui-tab__text">Tab with aside</span>
<span class="lui-tab__aside lui-icon lui-icon--close"></span>
</li>
<li class="lui-tab lui-active">
<span class="lui-tab__text">Active</span>
</li>
<li class="lui-tab lui-focused">
<span class="lui-tab__text">Pressed</span>
</li>
<li class="lui-tab lui-hovered">
<span class="lui-tab__text">Hover</span>
</li>
<li class="lui-tab lui-disabled">
<span class="lui-tab__text">Disabled</span>
</li>
</ul>
-
Tab
-
Tab with aside
-
Active
-
Pressed
-
Hover
-
Disabled
<ul class="lui-tabset" style="border: 1px solid rgba(255, 255, 255, 0.15);">
<li class="lui-tab lui-tab--inverse">
<span class="lui-tab__text">Tab</span>
</li>
<li class="lui-tab lui-tab--inverse">
<span class="lui-tab__text">Tab with aside</span>
<span class="lui-tab__aside lui-icon lui-icon--close"></span>
</li>
<li class="lui-tab lui-active lui-tab--inverse">
<span class="lui-tab__text">Active</span>
</li>
<li class="lui-tab lui-focused lui-tab--inverse">
<span class="lui-tab__text">Pressed</span>
</li>
<li class="lui-tab lui-hovered lui-tab--inverse">
<span class="lui-tab__text">Hover</span>
</li>
<li class="lui-tab lui-disabled lui-tab--inverse">
<span class="lui-tab__text">Disabled</span>
</li>
</ul>
Equal tab width
With lui-tabset-fill, the tabset will set equal widths to tabs which will be centered and take up the full width of the tabset container.
-
Tab
-
Tab with aside
-
Active
-
Pressed
-
Hover
-
Disabled
<ul class="lui-tabset lui-tabset--fill" style="border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);">
<li class="lui-tab">
<span class="lui-tab__text">Tab</span>
</li>
<li class="lui-tab">
<span class="lui-tab__text">Tab with aside</span>
<span class="lui-tab__aside lui-icon lui-icon--close"></span>
</li>
<li class="lui-tab lui-active">
<span class="lui-tab__text">Active</span>
</li>
<li class="lui-tab lui-focused">
<span class="lui-tab__text">Pressed</span>
</li>
<li class="lui-tab lui-hovered">
<span class="lui-tab__text">Hover</span>
</li>
<li class="lui-tab lui-disabled">
<span class="lui-tab__text">Disabled</span>
</li>
</ul>
-
Tab
-
Tab with aside
-
Active
-
Pressed
-
Hover
-
Disabled
<ul class="lui-tabset lui-tabset--fill" style="border-top: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15);">
<li class="lui-tab lui-tab--inverse">
<span class="lui-tab__text">Tab</span>
</li>
<li class="lui-tab lui-tab--inverse">
<span class="lui-tab__text">Tab with aside</span>
<span class="lui-tab__aside lui-icon lui-icon--close"></span>
</li>
<li class="lui-tab lui-active lui-tab--inverse">
<span class="lui-tab__text">Active</span>
</li>
<li class="lui-tab lui-focused lui-tab--inverse">
<span class="lui-tab__text">Pressed</span>
</li>
<li class="lui-tab lui-hovered lui-tab--inverse">
<span class="lui-tab__text">Hover</span>
</li>
<li class="lui-tab lui-disabled lui-tab--inverse">
<span class="lui-tab__text">Disabled</span>
</li>
</ul>
Tabset sizing
You can control the size of tabsets by adding a class. The following sizing options are available:
-
(default) - 38px
-
large - 54px
-
Tab
-
Tab with aside
-
Active
-
Pressed
-
Hover
-
Disabled
<ul class="lui-tabset lui-tabset--large" style="border: 1px solid rgba(0, 0, 0, 0.1);">
<li class="lui-tab lui-tab--large">
<span class="lui-tab__text lui-tab__text--large">Tab</span>
</li>
<li class="lui-tab lui-tab--large">
<span class="lui-tab__text lui-tab__text--large">Tab with aside</span>
<span class="lui-tab__aside lui-icon lui-icon--close"></span>
</li>
<li class="lui-tab lui-tab--large lui-active">
<span class="lui-tab__text lui-tab__text--large">Active</span>
</li>
<li class="lui-tab lui-tab--large lui-focused">
<span class="lui-tab__text lui-tab__text--large">Pressed</span>
</li>
<li class="lui-tab lui-tab--large lui-hovered">
<span class="lui-tab__text lui-tab__text--large">Hover</span>
</li>
<li class="lui-tab lui-tab--large lui-disabled">
<span class="lui-tab__text lui-tab__text--large">Disabled</span>
</li>
</ul>
