Tabs

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

Basic tabs

A basic example with three tabs.

<QtmTabs>
  <QtmTab active label="Item 1"></QtmTab>
  <QtmTab label="Item 2"></QtmTab>
  <QtmTab label="Item 3"></QtmTab>
</QtmTabs>

Sizes

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

<QtmTabs size="small">
  <QtmTab active label="Item 1"></QtmTab>
  <QtmTab label="Item 2"></QtmTab>
  <QtmTab label="Item 3"></QtmTab>
</QtmTabs>

<QtmTabs size="medium">
  <QtmTab active label="Item 1"></QtmTab>
  <QtmTab label="Item 2"></QtmTab>
  <QtmTab label="Item 3"></QtmTab>
</QtmTabs>

States

Active State

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

<QtmTabs>
  <QtmTab active label="Item 1"></QtmTab>
  <QtmTab label="Item 2"></QtmTab>
  <QtmTab label="Item 3"></QtmTab>
</QtmTabs>

Disabled State

Add disabled attribute to tab to style it as disabled.

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

<QtmTabs fullWidth fluid>
  <QtmTab active label="Item 1"></QtmTab>
  <QtmTab label="Item 2"></QtmTab>
  <QtmTab label="Item 3"></QtmTab>
</QtmTabs>

Alignment

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

Left alignment

<QtmTabs fullWidth alignment="left">
  <QtmTab active label="Item 1"></QtmTab>
  <QtmTab label="Item 2"></QtmTab>
  <QtmTab label="Item 3"></QtmTab>
</QtmTabs>

Center alignment

<QtmTabs fullWidth alignment="center">
  <QtmTab active label="Item 1"></QtmTab>
  <QtmTab label="Item 2"></QtmTab>
  <QtmTab label="Item 3"></QtmTab>
</QtmTabs>

Right alignment

<QtmTabs fullWidth alignment="right">
  <QtmTab active label="Item 1"></QtmTab>
  <QtmTab label="Item 2"></QtmTab>
  <QtmTab label="Item 3"></QtmTab>
</QtmTabs>

Scrollable tabs

Use scrollHorizontally to allow horizontal scrolling if needed.

<QtmTabs scrollHorizontally fullWidth>
  <QtmTab active label="Item 1"></QtmTab>
  <QtmTab label="Item 2"></QtmTab>
  <QtmTab label="Item 3"></QtmTab>
  <QtmTab label="Item 4"></QtmTab>
  <QtmTab label="Item 5"></QtmTab>
  <QtmTab label="Item 6"></QtmTab>
  <QtmTab label="Item 7"></QtmTab>
</QtmTabs>

Icons

Tab labels may be either all icons or all text.

<QtmTabs>
  <QtmTab active icon="settings"></QtmTab>
  <QtmTab icon="account_circle"></QtmTab>
  <QtmTab icon="face"></QtmTab>
</QtmTabs>

<QtmTabs>
  <QtmTab active icon="settings" label="Item 1"></QtmTab>
  <QtmTab icon="account_circle" label="Item 2"></QtmTab>
  <QtmTab 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>
  <QtmTab active icon="settings" label="Item 1" iconPosition="start"></QtmTab>
  <QtmTab icon="account_circle" label="Item 2" iconPosition="end"></QtmTab>
  <QtmTab icon="face" label="Item 3"></QtmTab>
</QtmTabs>

Vertical Tab

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

<QtmTabs tabItemDirection="vertical">
  <QtmTab active icon="settings" label="Item 1"></QtmTab>
  <QtmTab icon="account_circle" label="Item 2"></QtmTab>
  <QtmTab icon="face" label="Item 3"></QtmTab>
</QtmTabs>

Customization

A Tab can also take any content in their slot.

Item 1Item 2Item 3

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

API

QtmTabs

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

QtmTab

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