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

qtm-tabs

Property	Type	Default	Description
alignment	"center" | "left" | "right"	'left'	set the tabs alignement when the tabs component takes up the whole width available( fullWidth=true)
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
divider	boolean	true	If true, the divider is displayed.
fluid	boolean	false	set equal tabs widths when the tabs component takes up the whole width available( fullWidth=true)
fullHeight	boolean	false	If true, the tabs component takes up the whole height available
fullWidth	boolean	false	If true, the tabs component takes up the whole width available
scrollHorizontally	boolean	false	If true, the tabs component scroll horizontally
size	"medium" | "small"	'medium'	tab size
tabItemDirection	"horizontal" | "vertical"	'horizontal'	set tabs component's direction

qtm-tab

Property	Type	Default	Description
active	boolean	false	If true, the tab is active
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the component is disabled.
icon	string | { icon: string; classes?: string; lib?: IconLibType; size?: IconSizeType; variant?: IconVariantType; }		icon to display
iconPosition	"end" | "start"	'start'	icon position 'start' | 'end'
label	string		text to display

Event	Type	Description
clickedTabEvent	CustomEvent<string>	Callback fired when the tab is clicked.