TabLine

Components

4.7.2

Design A11yWCAG-AA API Example Changelog

TabLine

Wrap over the tab elements.

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

type

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

type

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