TabBar

Панель переключателей табов. Задаёт:

• size — l (верхнеуровневый) или m (внутри контента).
• orientation — horizontal (по умолчанию) или vertical.
• markerPosition — позиция активного маркера (before / after).
• slotActionButton — слот справа от табов для дополнительных действий.

Когда использовать

• Внутри Tabs как единственный контейнер списка кнопок-табов.
• Если нужно разместить дополнительные действия справа от табов (через слот slotActionButton).

Анатомия

Orientation

horizontal — бар в строку, vertical — колонкой.

Size

m — дефолт, l — для крупных лейаутов.

Marker position

Положение активного маркера относительно содержимого таба: before — перед, after — после.

Установка

pnpm add @cloud-ru/ds-tabs

import { Tabs } from '@cloud-ru/ds-tabs'

<Tabs.Bar />

Примеры использования

Size L — верхнеуровневый

import { SIZE, Tabs } from '@cloud-ru/ds-tabs';

export function SizeL() {
  return (
    <Tabs defaultValue='a'>
      <Tabs.TabBar size={SIZE.L}>
        <Tabs.Tab value='a' label='Первая' />
        <Tabs.Tab value='b' label='Вторая' />
      </Tabs.TabBar>
    </Tabs>
  );
}

Vertical orientation

import { ORIENTATION, Tabs } from '@cloud-ru/ds-tabs';

export function Vertical() {
  return (
    <Tabs defaultValue='a'>
      <Tabs.TabBar orientation={ORIENTATION.Vertical}>
        <Tabs.Tab value='a' label='Профиль' />
        <Tabs.Tab value='b' label='Безопасность' />
      </Tabs.TabBar>
    </Tabs>
  );
}

Props

Types

TabBarProps

TabProps

Unions

MarkerPosition

Orientation

Size

Storybook

Figma