TabPanel

Wrap over the tab elements.

import TabPanel from '@semcore/ui/tab-panel';
<TabPanel />;

TabPanelProps

& {...}

Name	Type	Description
onChange	((value: , e: React.SyntheticEvent<>) => void) | React.Dispatch<React.SetStateAction<>>	Is invoked when changing the selection
value		Value of the selected tab
defaultValue		Default value of the selected tab
behavior	"auto" | "manual"	Behavior of tabs. In `auto`, changes the tab immediately when press arrow. In `manual`, needs to press `space` or `enter` for select a choice.

TabPanel.Item

The tab element may contain Addon and Text, its structure is similar to Button. It takes some properties from TabLine (for example, size, disabled) and may override them.

TIP

It's recommended to use links in tabs, so that user can open them in a new browser tab or window, or copy their URL.

import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item />;

TabPanelItemProps

& {...}

Name	Type	Description
selected	boolean	Makes a tab selected. This property is determined automatically depending on the value.
disabled	boolean	Disabled state
value		Tab value
addonLeft	React.ElementType	Left addon tag
addonRight	React.ElementType	Right addon tag

TabPanel.Item.Addon

The addon inside the tab (most commonly an icon) sets the correct indents depending on the size.

It takes all the properties of the Box.

import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item.Addon />;

TabPanel.Item.Text

This ordinary text sets the appropriate indents depending on the size. If plain text without addons is used in the Tab, it will turn into TabLine.Item.Text automatically.

It takes all the properties of the Box.

import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item.Text />;