TabPanel
WCAG 2.1 AA: Ideal Support
Component is usable and understandable for the majority of people with or without disabilities. The meaning conveyed and the functionality available is the same.
TabPanel
Wrap over the tab elements.
import TabPanel from '@semcore/ui/tab-panel';
<TabPanel />;
TabPanelPropsBoxProps & {...}| Property | Description |
|---|---|
onChange ((value: TabPanelValue, e: React.SyntheticEvent) => void) | React.Dispatch | Is invoked when changing the selection |
value | Value of the selected tab |
defaultValue TabPanelValue = null | Default value of the selected tab |
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.
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.
import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item />;
TabPanelItemPropsBoxProps & KeyboardFocusProps & {...}| Property | 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 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.
import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item.Text />;