Tabs
Tabs organize similar content together into individual sections in the same page.
| install | yarn add @clayui/tabs |
|---|---|
| version | 3.119.0 |
Stable3.119.0View in LexiconCHANGELOG
Tabs
| Property | Description |
|---|---|
activation'manual' | 'automatic' | Flag to indicate the navigation behavior in the tab.
- manual - it will just move the focus and tab activation is done just
by pressing space or enter.
- automatic - moves the focus to the tab and activates the tab. The default value is 'manual' |
activenumber | The current tab active (controlled). |
defaultActivenumber | Initial active tab when rendering component (uncontrolled). The default value is 0 |
displayTypenull | 'basic' | 'underline' | Determines how tab is displayed. @deprecated since v3.89.0 with no replacement. |
fadeboolean | Flag to indicate if fade classname that applies an fading animation
should be applied.The default value is false |
justifiedboolean | Justify the nav items according the tab content. |
modernboolean | Applies a modern style to the tab.
@deprecated since v3.89.0 with no replacement. The default value is false |
onActiveChangeInternalDispatch<number> | Callback is called when the active tab changes (controlled). |
Tabs.Item
| Property | Description |
|---|---|
activeboolean | Flag to indicate if the component is active or not.
OBS: The active API in the new pattern has uncontrolled behavior,
working just like defaultActive as in the prop declared in the
root component.The default value is false |
disabledboolean | Flag to indicate if the TabPane is disabled. The default value is false |
hrefstring | This value is used to be the target of the link. |
innerPropsReact.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> | Props to be added to the item element that can be an anchor or a button. The default value is {} |
onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Callback to be used when clicking to a Tab Item. |
Tabs.Content
| Property | Description |
|---|---|
activeIndex | The default value is 0 |
fade | The default value is false |
Tabs.TabPane
| Property | Description |
|---|---|
active | The default value is false |
tabIndex | The default value is 0 |