Tabs

Display tab content.

The Tabs contain an additional Hooks, see subsection useTabs for details.

Default

Toggle display of different templates.

Disabled

Hide Divider

Hide Border

With Icon

Show icon component on label button.

Scroll Behavior

If all tabs cannot fit in the width then then hidden tabs can be accessed through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)

Imperatively

Control components with imperatively style.

APIs

Tabs.Props

AttributeDescriptionTypeAccepted valuesDefault
initialValueinitial valuestring--
valuecurrent selected valuestring--
hideDividerhide default dividerboolean-false
hideBorderhide border on activeboolean-false
leftSpacespace area on the left sideCSSProperties-12px
onChangechange event(val: string) => void--
alignhorizontal alignment of each child itemjustifyContent-left
activeClassNameclassName of active child itemstring--
activeStylestyle of active child itemobject--
hoverHeightRatioheight percentage of highlight blocknumber-0.7
hoverWidthRatiowidth percentage of highlight blocknumber-1.15
...native propsHTMLAttributes'alt', 'id', 'className', ...-

Tabs.Item.Props[alias: Tabs.Tab]

AttributeDescriptionTypeAccepted valuesDefault
label(required)display tab's labelstring--
value(required)unique ident valuestring--
disableddisable current tabboolean-false