Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

info

By default, Tabs will handle automatically the active tab item based on user interaction thanks to the enable-auto-active prop set by default to true.

All tab items and submenu items must have an id attribute for the features to work properly.

Basic tabs

A basic example with three tabs.

<qtm-tabs active-id="tab-item-1">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Sizes

Set size attribute to small or medium to style tabs size. By default, tabs have size medium.

<qtm-tabs active-id="tab-item-1" size="small">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

<qtm-tabs active-id="tab-item-1" size="medium">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Managing items

All the props listed below can be applied directly to the Tabs component.

info

All tab item elements must have an id for the features to work properly.

enable-auto-active

Setting the enable-auto-active prop to true (default value) will automatically activate the active state of tab menu items when they are clicked or when the active-id prop value has changed.

On the other hand, setting it to false will require manual management of the active state.

<qtm-tabs enable-auto-active="false">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2" active></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

active-id

Set the active-id value to the active tab item id by default.

<qtm-tabs active-id="tab-item-2">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Disabled State

Add disabled attribute to tab to style it as disabled.

<qtm-tabs>
  <qtm-tab id="tab-item-1" label="Item 1" disabled></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Divider

By default, tabs has a divider. Alternatively, tabs can be used without a divider by setting divider to false.

<qtm-tab divider="false">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Layout

• full-width attribute if you want the tabs container to take up the whole width.
• full-height attribute if you want the tabs container to take up the whole height.

Fluid Tabs

Add full-width and fluid to Tabs if you want set equal tabs widths when the tabs wrapper takes up the whole width available.

<qtm-tabs active-id="tab-item-1" full-width fluid>
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Alignment

Tabs alignment can be set by setting alignment attribute to left, center, right.

Left alignment

<qtm-tabs active-id="tab-item-1" full-width alignment="left">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Center alignment

<qtm-tabs active-id="tab-item-1" full-width alignment="center">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Right alignment

<qtm-tabs active-id="tab-item-1" full-width alignment="right">
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
</qtm-tabs>

Scrollable tabs

Use scroll-horizontally to allow horizontal scrolling if needed.

<qtm-tabs active-id="tab-item-1" scroll-horizontally full-width>
  <qtm-tab id="tab-item-1" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" label="Item 3"></qtm-tab>
  <qtm-tab id="tab-item-4" label="Item 4"></qtm-tab>
  <qtm-tab id="tab-item-5" label="Item 5"></qtm-tab>
  <qtm-tab id="tab-item-6" label="Item 6"></qtm-tab>
  <qtm-tab id="tab-item-7" label="Item 7"></qtm-tab>
</qtm-tabs>

Icons

Tab labels may be either all icons or all text.

<qtm-tabs active-id="tab-item-1">
  <qtm-tab id="tab-item-1" icon="settings"></qtm-tab>
  <qtm-tab id="tab-item-2" icon="account_circle"></qtm-tab>
  <qtm-tab id="tab-item-3" icon="face"></qtm-tab>
</qtm-tabs>

<qtm-tabs active-id="tab-item-1">
  <qtm-tab id="tab-item-1" icon="settings" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" icon="account_circle" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" icon="face" label="Item 3"></qtm-tab>
</qtm-tabs>

Icon position

By default, the icon is positioned at the start of a tab. Other supported position is end.

<qtm-tabs active-id="tab-item-1">
  <qtm-tab id="tab-item-1" icon="settings" label="Item 1" icon-position="start"></qtm-tab>
  <qtm-tab id="tab-item-2" icon="account_circle" label="Item 2" icon-position="end"></qtm-tab>
  <qtm-tab id="tab-item-3" icon="face" label="Item 3"></qtm-tab>
</qtm-tabs>

Vertical Tab

Set tab-item-direction attribute to horizontal or vertical to allow horizontal/vertical tab layout.

<qtm-tabs active-id="tab-item-1" tab-item-direction="vertical">
  <qtm-tab id="tab-item-1" icon="settings" label="Item 1"></qtm-tab>
  <qtm-tab id="tab-item-2" icon="account_circle" label="Item 2"></qtm-tab>
  <qtm-tab id="tab-item-3" icon="face" label="Item 3"></qtm-tab>
</qtm-tabs>

Customization

A Tab can also take any content in their slot.

Item 1Item 2Item 3

<qtm-tabs active-id="tab-item-1">
  <qtm-tab id="tab-item-1">
    <qtm-icon icon="settings" />
    <qtm-typography classes="text-green-500">Item 1</qtm-typography>
  </qtm-tab>
  <qtm-tab id="tab-item-2">
    <qtm-icon icon="account_circle" />
    <qtm-typography classes="text-red-500">Item 2</qtm-typography>
  </qtm-tab>
  <qtm-tab id="tab-item-3">
    <qtm-icon icon="face" />
    <qtm-typography classes="text-primary-500">Item 3</qtm-typography>
  </qtm-tab>
</qtm-tabs>

API

Tab

Loading API documentation...

Tabs

Loading API documentation...