TabItem

TabItem defines individual tabs within a Tabs component, providing both the tab header label and the content that displays when the tab is selected. As a non-visual structural component, it serves as a container that organizes content into distinct, switchable sections.

Key features:

Label definition: Provides the clickable tab header text via the label property
Content container: Wraps any child components that display when the tab is active
Structural organization: Creates the relationship between tab headers and their corresponding content
Seamless integration: Designed exclusively for use within Tabs components

Usage pattern: Always used as a direct child of Tabs components. The label property defines the tab button text, while child components placed within the TabItem provide the content that displays when the tab is selected.

Context variables available during execution:

$header: This context value represents the header context with props: id (optional), index, label, isActive.

Properties

`headerTemplate`

This property allows the customization of the TabItem header.

<App>
  <Tabs>
    <TabItem label="Home">
      Home content
    </TabItem>
    <TabItem label="Accounts">
      <property name="headerTemplate">
        <Text variant="title" color="green">Accounts</Text>
      </property>
      Accounts content
    </TabItem>
    <TabItem label="Settings">
      Settings content
    </TabItem>
  </Tabs>
</App>

Example: headerTemplate

<App>
  <Tabs>
    <TabItem label="Home">
      Home content
    </TabItem>
    <TabItem label="Accounts">
      <property name="headerTemplate">
        <Text variant="title" color="green">Accounts</Text>
      </property>
      Accounts content
    </TabItem>
    <TabItem label="Settings">
      Settings content
    </TabItem>
  </Tabs>
</App>

You can customize the header templates of all tab items, too. You can mix the Tabs level header templates with the TabItem level ones. In this case, the TabItem level template prevails.

`label`

This property sets the label of the component. If not set, the component will not display a label.

Events

`activated`

This event is triggered when the tab is activated.

<App var.activationCount="{0}">
  <Tabs>
    <TabItem label="Account" onActivated="activationCount++">
      <Text>Account</Text>
    </TabItem>
    <TabItem label="Stream">
      <Text>Stream</Text>
    </TabItem>
    <TabItem label="Support">
      <Text>Support</Text>
    </TabItem>
  </Tabs>
  <Text>The Account tab has been activated {activationCount} times.</Text>
</App>

Example: activated

<App var.activationCount="{0}">
  <Tabs>
    <TabItem label="Account" onActivated="activationCount++">
      <Text>Account</Text>
    </TabItem>
    <TabItem label="Stream">
      <Text>Stream</Text>
    </TabItem>
    <TabItem label="Support">
      <Text>Support</Text>
    </TabItem>
  </Tabs>
  <Text>The Account tab has been activated {activationCount} times.</Text>
</App>

Exposed Methods

This component does not expose any methods.

Styling

This component does not have any styles.