Tabs

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

Basic tabs

A basic example with three tabs.

Item 1Item 2Item 3

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

Item 1Item 2Item 3

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

Item 1Item 2Item 3

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

Item 1Item 2Item 3

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

Item 1Item 2Item 3

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

Item 1Item 2Item 3

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

Item 1Item 2Item 3

<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

Item 1Item 2Item 3

<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

Item 1Item 2Item 3

<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

Item 1Item 2Item 3

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

Item 1Item 2Item 3Item 4Item 5Item 6Item 7

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

settingsaccount_circleface

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

settingsItem 1account_circleItem 2faceItem 3

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

settingsItem 1Item 2account_circlefaceItem 3

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

settingsItem 1account_circleItem 2faceItem 3

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

settings

Item 1

account_circle

Item 2

face

Item 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
clicked-tab-event	CustomEvent<string>	Callback fired when the tab is clicked.