Developer TabPanel
Wrap over the tab elements.
jsx
import TabPanel from '@semcore/ui/tab-panel';
<TabPanel />;import TabPanel from '@semcore/ui/tab-panel';
<TabPanel />;TabPanelProps
& {...}| Name | Type | Description |
|---|---|---|
| onChange | ((value: , e: React.SyntheticEvent) => void) | React.Dispatch | 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 is recommended to make tabs with links, so that the user can open a separate tab with the report with the right mouse button if necessary.
jsx
import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item />;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 />;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 a simple 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 />;import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item.Text />;