Skip to content

TabLine

Components
3.3.8

TabLine

Wrap over the tab elements.

import TabLine from '@semcore/ui/tab-line';
<TabLine />;
interface
ITabLineProps extends IBoxProps, INeighborLocationProps
PropertyDescription
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

Is invoked when changing the selection

value

Value of the selected tab

defaultValue

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 />;
interface
ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps
PropertyDescription
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 />;