TabLine
TabLine
Wrap over the tab elements.
import TabLine from '@semcore/ui/tab-line';
<TabLine />;
TabLineProps
BoxProps & NeighborLocationProps & {...}
Property | Description |
---|---|
size "m" | "l" | false = m | TabLine size |
underlined boolean = true | Adds a bottom border for the entire component |
onChange ((value: TabLineValue, e: React.SyntheticEvent) => void) | React.Dispatch | Is invoked when changing the selection |
value | Value of the selected tab |
defaultValue TabLineValue = null | Default value of the selected tab |
TabLine.Item
This tab element may contain Addon
and Text
. The structure is similar to Button. It takes some properties of the TabLine (for example, size
, disabled
) and can override them.
import TabLine from '@semcore/ui/tab-line';
<TabLine.Item />;
TabLineItemProps
BoxProps & KeyboardFocusProps & NeighborItemProps & {...}
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 |
TabLine.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 TabLine from '@semcore/ui/tab-line';
<TabLine.Item.Addon />;
TabLine.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 TabLine from '@semcore/ui/tab-line';
<TabLine.Item.Text />;