TabPanel
TabPanel
Wrap over the tab elements.
jsx
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.
jsx
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
.
jsx
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
.
jsx
import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item.Text />;