README
title: 'Tabs' description: 'Tabs organize similar content together into individual sections in the same page.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/tabs/' packageNpm: '@clayui/tabs'
import {Tabs, TabsDropdown} from '$packages/clay-tabs/docs/index';
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.
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.
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:
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.