Tabs

Tabs — составной компонент вкладок в виде «пилюли».

Tabs.Root — «пилюля» со скроллом: держит выбор (компонент управляемый — выбранная вкладка задаётся value, смена приходит в onValueChange) и прокручивает вкладки по горизонтали, если они не помещаются по ширине, — в том числе вертикальным колесом мыши.

Вкладка — Tabs.Item с обязательным value: она задаёт цвет, размер и скругление теми же пропсами, что Button.Root (variant, appearance, size, radius), и выглядит нажатой, когда выбрана, — сравнивать value вручную не нужно. Содержимое потребитель собирает сам: Tabs.Icon — иконка, Tabs.Label — текст, Tabs.Close — крестик закрытия; порядок задаёт разметка.

Самый частый вид — компактные вкладки редактора, как в IDE (пример под описанием): appearance "ghost", size "xs", иконка типа документа и Tabs.Close.

Используется в: QuickSearch

Доска задачЗаметки.mdБэклог

Анатомия

Tabs.Root (скролл-обёртка + «пилюля»)

Item

Icon | Label | Close

Примеры

На всю ширину

adaptive на Tabs.Item растягивает вкладки на всю доступную ширину, деля её поровну, — подходит для небольшого фиксированного набора.

ДеньНеделяМесяц

Прокрутка при переполнении

Вкладки не сжимаются: когда их больше, чем помещается, «пилюля» прокручивается по горизонтали. Крутани вертикальное колесо мыши над вкладками — прокрутка плавная, как в IDE.

Размер и оформление

Каждая вкладка принимает пропсы контрола — size, variant, appearance, radius, — поэтому вкладки можно увеличить или перекрасить так же, как кнопки.

ВсеМоиАрхив

API

Prop	Type	Default
`children`* Вкладки — `Tabs.Item`, слева направо	`ReactNode`	-
`value` Значение (value) выбранной вкладки — компонент управляемый	`string`	-
`onValueChange` Вызывается со значением вкладки при её выборе	`(value: string) => void`	-

Tabs.Item

Вкладка: value связывает её с выбором Tabs.Root, остальные пропсы — оформление, как у Button.Root. Выбранная вкладка выглядит нажатой автоматически.

Prop	Type	Default
`children`* Содержимое вкладки: `Tabs.Icon`, `Tabs.Label` и `Tabs.Close`	`ReactNode`	-
`value`* Значение вкладки — по нему `Tabs.Root` понимает, какая выбрана	`string`	-
`radius` Скругление углов: circle — «таблетка». По умолчанию зависит от size	`Radius`	-
`adaptive` Делит доступную ширину «пилюли» поровну с соседними вкладками	`boolean`	`false`
`variant` Смысловой вариант — задаёт цвет	`Variant`	`"primary"`
`appearance` Внешний вид: сплошная заливка, обводка (сплошная или пунктирная) или приглушённая подложка	`Appearance`	`"solid"`
`size` Размер компонента	`Size`	-
`color` Кастомный цвет — для случаев вне стандартного набора вариантов. Принимает любое CSS-значение, имеет приоритет над цветом из variant	`string`	-

Наследуется от Pick<VisualProps, K>, Omit<ComponentProps<typeof SegmentGroup.Item>, "children">

Tabs.Icon

Иконка рядом с текстом вкладки — масштабируется вместе с ним и не сжимается.

Prop	Type	Default
`children`* Иконка рядом с текстом вкладки	`ReactNode`	-

Tabs.Label

Текст вкладки; обрезается многоточием, если не влезает.

Prop	Type	Default
`children`* Текст вкладки — обрезается многоточием, если не влезает	`ReactNode`	-

Tabs.Close

Крестик закрытия — виден по наведению на вкладку и на выбранной вкладке. Закрытие ловит onClick: по крестику или средней кнопкой мыши по всей вкладке.

Prop	Type	Default
`onClick`* Вызывается при закрытии вкладки — по крестику или средней кнопкой мыши	`() => void`	-