ComponentsTabs
Tabs
The Tabs component is a powerful and flexible navigation tool for your applications. It offers various interaction modes, accessibility features, and the ability to display different contents based on the selected tab.
The Tabs component is a powerful and flexible navigation tool for your applications. It offers various interaction modes, accessibility features, and the ability to display different contents based on the selected tab.
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
'manual' | 'automatic'
The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
string
'ltr' | 'rtl'
The document's text/writing direction.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The unique identifier of the machine.
Partial<{ root: string trigger: string tablist: string content: string indicator: string }>
The ids of the elements in the tabs. Useful for composition.
boolean
Whether the keyboard navigation will loop from last tab to first, and vice versa.
(details: FocusChangeDetails) => void
Callback to be called when the focused tab changes
(details: ValueChangeDetails) => void
Callback to be called when the selected/active tab changes
'horizontal' | 'vertical'
The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
IntlTranslations
Specifies the localized strings that identifies the accessibility elements and their states
string
The selected tab id
() => void
Clears the value of the tabs.
(props: ContentProps) => Dict<any>
(props: TriggerProps) => Dict<any>
(props: TriggerProps) => TriggerState
Returns the state of the trigger with the given props
Dict<any>
string[]
The previous values of the tabs in sequence of selection.
Dict<any>
(value: string) => void
Sets the indicator rect to the tab with the given value
(value: string) => void
Sets the value of the tabs.
Dict<any>
string
The value of the tab that is currently focused.
string
The current value of the tabs.
string
boolean
Whether to enable lazy mounting. Defaults to `false`.
() => void
boolean
boolean
Whether to unmount on exit. Defaults to `false`.
string
boolean