Tabs

yarn add @clayui/tabs

Tabs organize similar content together into individual sections in the same page.

Stable 3.36.0 View in Lexicon CHANGELOG

Tabs
Tabs.Item
Tabs.Content
Tabs.TabPane

Tabs

Property	Type	Required	Default	Description
justified	boolean	false		Justify the nav items according the tab content.
modern	boolean	false	true	Applies a modern style to the tab.

Tabs.Item

Property	Type	Required	Default	Description
active	boolean	false	false	Flag to indicate if the component is active or not.
disabled	boolean	false	false	Flag to indicate if the TabPane is disabled.
href	string	false		This value is used to be the target of the link.
innerProps	React.HTMLAttributes<HTMLAnchorElement \| HTMLButtonElement>	false	{}	Props to be added to the item element that can be an anchor or a button.
onClick	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	false		Callback to be used when clicking to a Tab Item.

Tabs.Content

Property	Type	Required	Default	Description
activeIndex	number	false	0	Receives a number that indicates the `tabkey` to be rendered.
children	Array<React.ReactElement>	true		Children elements received from ClayTabs.Content component.
fade	boolean	false	false	Flag to indicate if `fade` classname that applies an fading animation should be applied.

Tabs.TabPane

Property	Type	Required	Default	Description
active	boolean	false	false	Flag to indicate if `active` classname should be applied
fade	boolean	false		Flag to indicate if `fade` classname that applies a fading animation should be applied.