Developer TabLine
Wrap over the tab elements.
jsx
import TabLine from 'intergalactic/tab-line';
<TabLine />;import TabLine from 'intergalactic/tab-line';
<TabLine />;TabLineProps
& & {...}| Name | Type | Description |
|---|---|---|
| size | "m" | "l" | false | TabLine size |
| underlined | boolean | Adds a bottom border for the entire component |
| onChange | ((value: , e: React.SyntheticEvent<>) => void) | React.Dispatch<React.SetStateAction<>> | 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.
jsx
import TabLine from 'intergalactic/tab-line';
<TabLine.Item />;import TabLine from 'intergalactic/tab-line';
<TabLine.Item />;TabLineItemProps
& & & {...}| 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 | 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.
jsx
import TabLine from 'intergalactic/tab-line';
<TabLine.Item.Addon />;import TabLine from 'intergalactic/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.
jsx
import TabLine from 'intergalactic/tab-line';
<TabLine.Item.Text />;import TabLine from 'intergalactic/tab-line';
<TabLine.Item.Text />;