Tabs
yarn add @clayui/tabs
Tabs organize similar content together into individual sections in the same page.
Stable3.91.0View in LexiconCHANGELOG
Introduction
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.
Use 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 button. Use ClayTabs.TabPane for wrapping the content that will be rendered by TabPane as the following example:
Tabs
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.
Modern Tabs
For the modern variant of Tabs use the modern property. If you need to justify the text inside the ClayTabs.Item, use the justified property.
Dropdown Tabs
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:
TabPanel
Note that ClayTabs.TabPanel is an alias to ClayTabs.TabPane. The two are interchangeable.