Tab

Tab — элемент, который представляет собой вкладку (таб), позволяющую скрывать или показывать сгруппированное содержимое при нажатии на нее.

Из чего состоит

Область таба
Левая иконка
Текст таба
Линия

Основные свойства

Тема (Theme)

Состояние (State)

Размер (Size)

Форма (Form)

Позиция линии (Stroke Position)

Отключаемые элементы

👁 Фон (Background)

👁 Иконка (Icon)

👁 Текст (Text)

Редактируемые элементы

✏️ Иконка (Icon)

✏️ Текст (Text)

Акцентный цвет (day)

Могут принимать акцентный цвет: иконка, текст при ховере — акцентного “Hover” цвета.
Обводка (линия), иконка, текст при клике — акцентного “Active” цвета.

Акцентный цвет (night)

Могут принимать акцентный цвет: иконка, текст при ховере — акцентного “Hover” цвета.
Обводка (линия), иконка, текст при клике — акцентного “Active” цвета.

Ширина таба

Может быть: по отступам внутри, фиксированной, растягиваться под внешний контейнер

Выравнивание текста/иконки

Текст+иконка могут выраниваться по левому краю, по центру, по правому краю (заметно, когда ширина таба не по отступам, а фиксированная или растягивается под внешний контейнер).

Группа табов

Группа табов может быть: вертикальная, горизонтальная.

Вертикальная группа может состоять из табов со свойствами:

Stroke Position: Right / Left / Bottom
C фоном, Form: Base / Brick / Round

*Выравнивание текста внутри табов может быть: По левому краю / По центру / По правому краю

Горизонтальная группа может состоять из:

Stroke Position: Bottom
C фоном, Form: Base / Brick / Round

*Выравнивание текста внутри табов может быть: По левому краю / По центру / По правому краю *Form: “Base” и “Round” имеют отступы = 16px во всех размерах