TabLine

Wrap over the tab elements.

import TabLine from '@semcore/ui/tab-line';
<TabLine />;

NSTabLine.Props

& & {...}

Name	Type	Description
size	"m" | "l" | false	TabLine size
underlined	boolean	Adds a bottom border for the entire component
onChange	((value: , e: ) => void) |	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.

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 />;

NSTabLine.Item.Props

& & {...}

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		Left addon tag
addonRight		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

An instance of Text with the appropriate styles depending on the TabLine size.

Plain text without addons placed directly in TabLine.Item is wrapped in TabLine.Item.Text automatically.

import TabLine from '@semcore/ui/tab-line';
<TabLine.Item.Text />;

NSTabLine.Item.Text.Props