Tabs

📔

This component is in an experimental state; you can use it in your app. However, we may modify it, and it may even have breaking changes in the future.

The Tabs component provides a tabbed layout where each tab has a clickable label and content.

The component accepts only TabItem components as children. Other child components will not be displayed.

The TabItem component has a label prop to define the tab button label text. Content is provided to a tab via placing child components under the TabItem.

<App>
  <Tabs>
    <TabItem label="Account">
      <Text>Account</Text>
    </TabItem>
    <TabItem label="Stream">
      <Text>Stream</Text>
    </TabItem>
    <TabItem label="Support">
      <Text>Support</Text>
    </TabItem>
  </Tabs>
</App>

Properties

`activeTab`

This property indicates the index of the active tab. The indexing starts from 0, representing the starting (leftmost) tab.

<App>
  <Tabs activeTab="2">
    <TabItem label="Account">
      <Text>Account</Text>
    </TabItem>
    <TabItem label="Stream">
      <Text>Stream</Text>
    </TabItem>
    <TabItem label="Support">
      <Text>Support</Text>
    </TabItem>
  </Tabs>
</App>

`orientation (default: "vertical")`

This property indicates the orientation of the component. In horizontal orientation, the tab sections are laid out on the left side of the content panel, while in vertical orientation, the buttons are at the top.

Available values: horizontal, vertical (default)

<App>
  <Tabs orientation="horizontal">
    <TabItem label="Account">
      <Text>Account</Text>
    </TabItem>
    <TabItem label="Stream">
      <Text>Stream</Text>
    </TabItem>
    <TabItem label="Support">
      <Text>Support</Text>
    </TabItem>
  </Tabs>
</App>

`tabTemplate`

This property declares the template for the clickable tab area.

<App>
  <Tabs>
    <property name="tabTemplate">
      <Button variant="outlined" label="{$item.label}" />
    </property>
    <TabItem label="Account">
      <Text>Account</Text>
    </TabItem>
    <TabItem label="Stream">
      <Text>Stream</Text>
    </TabItem>
    <TabItem label="Support">
      <Text>Support</Text>
    </TabItem>
  </Tabs>
</App>

Events

This component does not have any events.

Exposed Methods

`next`

This method selects the next tab.

Styling

The Tabs component uses these theme variables to customize its appearance:

backgroundColor-Tabs
borderColor-Tabs
borderWidth-Tabs
borderColor-active-Tabs
backgroundColor-trigger-Tabs
backgroundColor-trigger-Tabs--hover

{
  "id": "custom",
  "name": "Custom Theme",
  "themeVars": {
    "backgroundColor-Tabs": "green",
    "borderWidth-Tabs": "6px",
    "borderColor-Tabs": "gold"
  }
}

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-list-Tabs	none	none
backgroundColor-Tabs	none	none
backgroundColor-trigger-Tabs	none	none
backgroundColor-trigger-Tabs--active	none	none
backgroundColor-trigger-Tabs--hover	$color-surface-100	$color-surface-100
border-list-Tabs	none	none
border-trigger-Tabs	none	none
borderColor-active-Tabs	$color-primary	$color-primary
borderColor-Tabs	$borderColor	$borderColor
borderRadius-list-Tabs	none	none
borderRadius-trigger-Tabs	none	none
borderStyle-Tabs	solid	solid
borderWidth-Tabs	2px	2px
padding-trigger-Tabs	$space-4	$space-4
paddingBottom-trigger-Tabs	none	none
paddingHorizontal-trigger-Tabs	none	none
paddingLeft-trigger-Tabs	none	none
paddingRight-trigger-Tabs	none	none
paddingTop-trigger-Tabs	none	none
paddingVertical-trigger-Tabs	none	none
textColor-trigger-Tabs	none	none

TableOfContents Text