Tabs

Stable3.104.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.

Light Tabs

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.