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	$color-primary-50	$color-primary-50
backgroundColor-Tabs	$backgroundColor-primary	$backgroundColor-primary
backgroundColor-trigger-Tabs	$backgroundColor-primary	$backgroundColor-primary
backgroundColor-trigger-Tabs--hover	$color-primary-50	$color-primary-50
borderColor-active-Tabs	$color-primary	$color-primary
borderColor-Tabs	$borderColor	$borderColor
borderStyle-Tabs	solid	solid
borderWidth-Tabs	2px	2px
textColor-trigger-Tabs	$color-primary-100	$color-primary-100

TableOfContents Text