Tab
Одна вкладка внутри TabBar. Идентифицируется по value — это же значение используется в TabContent для сопоставления. Поддерживает counter (встроенный Counter) и disabled.
Когда использовать
- Внутри
TabBarдля каждой доступной вкладки. - Когда нужно показать счётчик (число уведомлений/записей) рядом с названием таба.
Анатомия
Size
Высота таба: m — дефолт, l — для крупных лейаутов. Наследуется от TabBar.
Marker position
Положение активного маркера: before — перед содержимым, after — после. Наследуется от TabBar.
Установка
pnpm add @cloud-ru/ds-tabsimport { Tabs } from '@cloud-ru/ds-tabs'
<Tabs.Tab value='overview' label='Overview' />Примеры использования
Tab с counter
tsx
import { Tabs } from '@cloud-ru/ds-tabs';
export function WithCounter() {
return (
<Tabs defaultValue='inbox'>
<Tabs.TabBar>
<Tabs.Tab value='inbox' label='Входящие' counter={{ label: 12 }} />
<Tabs.Tab value='archive' label='Архив' />
</Tabs.TabBar>
</Tabs>
);
}Отключённый таб
tsx
import { Tabs } from '@cloud-ru/ds-tabs';
export function Disabled() {
return (
<Tabs defaultValue='a'>
<Tabs.TabBar>
<Tabs.Tab value='a' label='Активен' />
<Tabs.Tab value='b' label='Выключен' disabled />
</Tabs.TabBar>
</Tabs>
);
}Props
Types
Props
TabProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
className | string | — | no | CSS-класс |
counter | { label: number; appearance?: Appearance; roleAppearance?: RoleAppearance; } | undefined | — | no | Счетчик, отображающийся внутри кнопки переключения |
data-test-id | string | — | no | |
disabled | boolean | false | no | Деактивирована ли вкладка |
label | string | — | yes | Заголовок вкладки |
onClick | ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | — | no | Колбек клика по кнопке переключения |
value | string | — | yes | Value вкладки |