Tabs

Tabs enables users to switch among content panels using clickable tab headers. It provides an efficient way to present multiple related sections in a single interface area, with each tab containing distinct content defined by TabItem components.

Key features:

Content organization: Efficiently displays multiple content sections in a single interface area
Flexible orientation: Supports both horizontal (tabs on top) and vertical (tabs on side) layouts
Active tab control: Programmatically set which tab is initially selected
Custom tab styling: Configurable tab appearance via tabTemplate property
Navigation methods: Built-in methods for programmatic tab switching

Usage pattern: The component accepts only TabItem components as children. Other child components will not be displayed. Each TabItem has a label property for the tab button text, with content provided by placing child components within 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>

Example: using Tabs

<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. If not set, the first tab is selected by default.

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

Example: activeTab

<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: "horizontal")

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 (default), vertical

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

Example: orientation

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

Events

This component does not have any events.

Exposed Methods

`next`

This method selects the next tab. If the current tab is the last one, it wraps around to the first tab.

Signature: next(): void

Styling

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