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 enableAutoActive 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.

<QtmTabs activeId="tab-item-1">
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Sizes

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

<QtmTabs activeId="tab-item-1" size="small">
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

<QtmTabs activeId="tab-item-1" size="medium">
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

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.

enableAutoActive

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

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

<QtmTabs enableAutoActive={false}>
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2" active></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

activeId

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

<QtmTabs activeId="tab-item-2">
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Disabled State

Add disabled attribute to tab to style it as disabled.

<QtmTabs>
  <QtmTab id="tab-item-1" label="Item 1" disabled></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Divider

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

<QtmTabs divider={false}>
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Layout

• fullWidth attribute if you want the tabs container to take up the whole width.
• fullHeight attribute if you want the tabs container to take up the whole height.

Fluid Tabs

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

<QtmTabs activeId="tab-item-1" fullWidth fluid>
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Alignment

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

Left alignment

<QtmTabs activeId="tab-item-1" fullWidth alignment="left">
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Center alignment

<QtmTabs activeId="tab-item-1" fullWidth alignment="center">
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Right alignment

<QtmTabs activeId="tab-item-1" fullWidth alignment="right">
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
</QtmTabs>

Scrollable tabs

Use scrollHorizontally to allow horizontal scrolling if needed.

<QtmTabs activeId="tab-item-1" scrollHorizontally fullWidth>
  <QtmTab id="tab-item-1" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" label="Item 3"></QtmTab>
  <QtmTab id="tab-item-4" label="Item 4"></QtmTab>
  <QtmTab id="tab-item-5" label="Item 5"></QtmTab>
  <QtmTab id="tab-item-6" label="Item 6"></QtmTab>
  <QtmTab id="tab-item-7" label="Item 7"></QtmTab>
</QtmTabs>

Icons

Tab labels may be either all icons or all text.

<QtmTabs activeId="tab-item-1">
  <QtmTab id="tab-item-1" icon="settings"></QtmTab>
  <QtmTab id="tab-item-2" icon="account_circle"></QtmTab>
  <QtmTab id="tab-item-3" icon="face"></QtmTab>
</QtmTabs>

<QtmTabs activeId="tab-item-1">
  <QtmTab id="tab-item-1" icon="settings" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" icon="account_circle" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" icon="face" label="Item 3"></QtmTab>
</QtmTabs>

Icon position

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

<QtmTabs activeId="tab-item-1">
  <QtmTab id="tab-item-1" icon="settings" label="Item 1" iconPosition="start"></QtmTab>
  <QtmTab id="tab-item-2" icon="account_circle" label="Item 2" iconPosition="end"></QtmTab>
  <QtmTab id="tab-item-3" icon="face" label="Item 3"></QtmTab>
</QtmTabs>

Vertical Tab

Set tabItemDirection attribute to horizontal or vertical to allow horizontal/vertical tab layout.

<QtmTabs activeId="tab-item-1" tabItemDirection="vertical">
  <QtmTab id="tab-item-1" icon="settings" label="Item 1"></QtmTab>
  <QtmTab id="tab-item-2" icon="account_circle" label="Item 2"></QtmTab>
  <QtmTab id="tab-item-3" icon="face" label="Item 3"></QtmTab>
</QtmTabs>

Customization

A Tab can also take any content in their slot.

Item 1Item 2Item 3

<QtmTabs activeId="tab-item-1">
  <QtmTab id="tab-item-1">
    <QtmIcon icon="settings" />
    <QtmTypography classes="text-green-500">Item 1</QtmTypography>
  </QtmTab>
  <QtmTab id="tab-item-2">
    <QtmIcon icon="account_circle" />
    <QtmTypography classes="text-red-500">Item 2</QtmTypography>
  </QtmTab>
  <QtmTab id="tab-item-3">
    <QtmIcon icon="face" />
    <QtmTypography classes="text-primary-500">Item 3</QtmTypography>
  </QtmTab>
</QtmTabs>

API

Tab

Loading API documentation...

Tabs

Loading API documentation...