Tabs organize similar content together into individual sections in the same page.
|install||yarn add @clayui/tabs|
Stable3.96.0View in LexiconCHANGELOG
ClayTabs is a controlled component, we left this component controlled because the user can use Dropdowns or another control to select a
TabPane for render. Just creating states to manage it.
ClayTabs.Item for defining a TabPane's trigger. For using this trigger as an
anchor element, just define
href property, otherwise, the trigger will be a
ClayTabs.TabPane for wrapping the content that will be rendered by TabPane as the following example:
This is the default tab. The
displayType attribute was deprecated after 3.89.0. You no longer need to use
displayType="basic" to output this style.
For the modern variant of Tabs use the
modern property. If you need to justify the text inside the
ClayTabs.Item, use the
As a controlled component, Tabs allows you to control the
active TabPane. Thereby, we can select the active TabPane by a Dropdown menu. For example:
ClayTabs.TabPanel is an alias to
ClayTabs.TabPane. The two are interchangeable.