Skip to main content

Tabs

An element for offering two or more content or functional options.

Segmented1.svg

1. Root : The top-level container area that wraps the Tabs component
2. Tab Item : A group of content (pages) that users can switch by selecting
3. Label : A label that conveys information about the Tab item
4. Selected indicator : An element indicating the Tab item selected by the user
5. Tab Container : The area where Tab items are listed



States

StatesValueDescription
EnableBooleanDefault state where touch is enabled
PressedBooleanChanges to True when being clicked via touch
SelectedBooleanThe selected value input in the Tabs component

Segmented7.svg



Properties

PropertyValueDescription
TypeBox, LineTwo styles of Tab types
FittedBooleanIf True, Tabs expand at regular intervals to fit the Tabs width
If False, displayed with Left Aligned alignment

Segmented2.svg Segmented4.svg