Tabs - Docs

A component for organizing content into switchable panels.

Viewmodels

loopItemsboolean

Determines whether selectedItemIndex loops to first item or clamps when it reaches the bounds.

selectedItemIndexnumber

The index of the currently selected option in the component.

itemCountnumber

The total number of items in tabs.

tabslist

Contains a list of all available tabs in the component.

labelstring

Specifies the localized strings that identifies the component.

directionEnum

Determines the component's left-to-right alignment.

controlArtboardartboard

Determines which artboard is used to visualize the tab's state.

contentArtboardartboard

Determines which artboard is used to visualize the tab's contents.

listIndexnumber

The index of the item.

itemPressedtrigger

Fires when the tab has been chosen.

labelstring

Specifies the localized strings that identifies the tab.

disabledboolean

Indicates when the tab is disabled.

hoverboolean

Indicates when the pointer overlaps with the tab.

Root - The Root of the component.
- Tabs - A Layout containing the tab items.
  - An Artboard List of tabs. The artboard in use is tab_item.
- Content - A Layout containing tab content.
  - An Artboard List of tabs. The artboard in use is tab_content_display_item.
IndexManager - A script that manages selectedItemIndex. If (loopItems = true), selectedItemIndex will loop around once it goes beyond the range of itemCount. If (loopItems = false), selectedItemIndex will be clamped within the bounds of itemCount. In the event that one of the items in tabs is disabled, selectedItemIndex will skip to the next item.

Root - The Root of the component.
- Label - A Layout containing the option's Label.
  - Text Layout - A Layout containing a Text Element.
    - Text - A text element. The value of its Text Run is bound to label (TabVM).
- Line - A layout that acts as a border for the bottom of the tab.

This component contains three pairs of animations, each on its corresponding layer.

Disabled
- DisabledTrue - Indicates the Tab cannot be interacted with. Plays if (disabled (TabVM) = true).
- DisabledFalse - Indicates the Tab can be interacted with. Plays if (disabled (TabVM) = false).
Hover
- HoverTrue - Indicates the pointer overlaps with the Tab. Plays if (hover (TabVM) = true) and (disabled (TabVM) = false).
- HoverFalse - Indicates the pointer does not overlap with the Tab. Plays if (hover (TabVM) = false).
SelectedIndex
- SelectedIndexTrue - Indicates the tab has been selected (selectedItemIndex = listIndex).
- SelectedIndexFalse - Indicates the tab has not been selected. Plays if (selectedItemIndex ≠ listIndex).

Root - The Root of the component. Pointer functionality targets this Layout.
- A component instance of controlArtboard (TabVM).

Root - The Root of the component.
- A component instance of contentArtboard (TabVM).

This artboard contains a pair of animations used in a corresponding state machine layer.

SelectedIndex
- SelectedIndexTrue - Sets the visibility of Root to "Show." Plays if (selectedItemIndex = listIndex).
- SelectedIndexFalse - Sets the visibility of Root to "Hide." Plays if (selectedItemIndex ≠ listIndex).

If using this component on a platform without pointer input, you can increment or decrement selectedItemIndex to navigate between options. IndexManager was created to account for this use case.
Your tab contents and styling might vary depending on the needs of your project. To accommodate this, you can adjust the layout settings of tabs_component and tab_item. In contrast, adjusting tab_content_display_item from its layout settings risks breaking core functionality. It is recommended to customize contentArtboard instead.