Tabs

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

Basic tabs

A basic example with three tabs.

<qtm-tabs>
  <qtm-tab active label="Item 1"></qtm-tab>
  <qtm-tab label="Item 2"></qtm-tab>
  <qtm-tab 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 size="small">
  <qtm-tab active label="Item 1"></qtm-tab>
  <qtm-tab label="Item 2"></qtm-tab>
  <qtm-tab label="Item 3"></qtm-tab>
</qtm-tabs>

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

States

Active State

Add active attribute to a tab to style it as active.

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

Disabled State

Add disabled attribute to tab to style it as disabled.

<qtm-tabs>
  <qtm-tab disabled label="Item 1"></qtm-tab>
  <qtm-tab label="Item 2"></qtm-tab>
  <qtm-tab 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-tabs divider="false">
  <qtm-tab label="Item 1"></qtm-tab>
  <qtm-tab label="Item 2"></qtm-tab>
  <qtm-tab 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 qtm-tabs if you want set equal tabs widths when the tabs wrapper takes up the whole width available.

<qtm-tabs full-width fluid>
  <qtm-tab active label="Item 1"></qtm-tab>
  <qtm-tab label="Item 2"></qtm-tab>
  <qtm-tab 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 full-width alignment="left">
  <qtm-tab active label="Item 1"></qtm-tab>
  <qtm-tab label="Item 2"></qtm-tab>
  <qtm-tab label="Item 3"></qtm-tab>
</qtm-tabs>

Center alignment

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

Right alignment

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

Scrollable tabs

Use scroll-horizontally to allow horizontal scrolling if needed.

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

Icons

Tab labels may be either all icons or all text.

<qtm-tabs>
  <qtm-tab active icon="settings"></qtm-tab>
  <qtm-tab icon="account_circle"></qtm-tab>
  <qtm-tab icon="face"></qtm-tab>
</qtm-tabs>

<qtm-tabs>
  <qtm-tab active icon="settings" label="Item 1"></qtm-tab>
  <qtm-tab icon="account_circle" label="Item 2"></qtm-tab>
  <qtm-tab 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>
  <qtm-tab
    active
    icon="settings"
    label="Item 1"
    icon-position="start"
  ></qtm-tab>
  <qtm-tab icon="account_circle" label="Item 2" icon-position="end"></qtm-tab>
  <qtm-tab 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 tab-item-direction="vertical">
  <qtm-tab active icon="settings" label="Item 1"></qtm-tab>
  <qtm-tab icon="account_circle" label="Item 2"></qtm-tab>
  <qtm-tab 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>
  <qtm-tab active>
    <qtm-icon icon="settings"></qtm-icon>
    <qtm-typography classes="text-green-500">Item 1</qtm-typography>
  </qtm-tab>
  <qtm-tab>
    <qtm-icon icon="account_circle"></qtm-icon>
    <qtm-typography classes="text-red-500">Item 2</qtm-typography>
  </qtm-tab>
  <qtm-tab>
    <qtm-icon icon="face"></qtm-icon>
    <qtm-typography classes="text-primary-500">Item 3</qtm-typography>
  </qtm-tab>
</qtm-tabs>

API

Tabs

Loading API documentation...

Tab

Loading API documentation...