Uihub

Appearance

Tab ​

Usage ​

See design usage guidelines

Tabs organize content across different screens and views. A tab UI, short for tab user interface, is a component used to organize and navigate between different sections of content within a single interface.

It's like having multiple pages stacked on top of each other, but you can only see one at a time. Each section is called a tab and typically consists of a labelled tab button and a corresponding content panel.

Default ​

html
<x-tabs active="">
    <div name="x-tab" title="Tab 1">Tab Content 1</div>
    <div name="x-tab" title="Tab 2">Tab Content 2</div>
    <div name="x-tab" title="Tab 3">Tab Content 3</div>
    <div name="x-tab" title="Tab 4"><div name="x-tab-header">Tab 4 <span class="badge grey">99+</span></div>Tab Content 4</div>
</x-tabs>

Rendered ​

html
<div>
    <ul class="tabs">
        <li class="tab active">Tab 1</li>
        <li class="tab">Tab 2</li>
        <li class="tab">Tab 3</li>
    </ul>
    <div class="tab-content">
        <div class=""> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto aperiam neque optio velit omnis numquam recusandae rem eos similique architecto veniam obcaecati minus atque </div>
        <div class="d-none"> Tab 2 Complex </div>
        <div class="d-none"> Tab 3 Complex </div>
    </div>
</div>

1st Variation ​

html
<x-tabs active="" type="type-1">
    <div name="x-tab" title="Tab 1">Tab Content 1</div>
    <div name="x-tab" title="Tab 2">Tab Content 2</div>
    <div name="x-tab" title="Tab 3">Tab Content 3</div>
    <div name="x-tab" title="Tab 4"><div name="x-tab-header">Tab 4 <span class="badge grey">99+</span></div>Tab Content 4</div>
</x-tabs>

2nd Variation ​

html
<x-tabs active="" type="type-2">
    <div name="x-tab" title="Tab 1">Tab Content 1</div>
    <div name="x-tab" title="Tab 2">Tab Content 2</div>
    <div name="x-tab" title="Tab 3">Tab Content 3</div>
    <div name="x-tab" title="Tab 4"><div name="x-tab-header">Tab 4 <span class="badge grey">99+</span></div>Tab Content 4</div>
</x-tabs>

3rd Variation ​

html
<x-tabs active="" type="type-2">
    <div name="x-tab" title="Tab 1">Tab Content 1</div>
    <div name="x-tab" title="Tab 2">Tab Content 2</div>
    <div name="x-tab" title="Tab 3">Tab Content 3</div>
    <div name="x-tab" title="Tab 4"><div name="x-tab-header">Tab 4 <span class="badge grey">99+</span></div>Tab Content 4</div>
</x-tabs>

Usage Guidelines ​