TabContent
Контейнер контента. Рендерится только при совпадении value с активным табом. Формирует <div role='tabpanel'> и связывается с кнопкой таба через aria-labelledby.
Когда использовать
- Для каждой вкладки, у которой есть видимый контент.
- Когда нужен корректный
aria-labelledby/role='tabpanel'из коробки.
Установка
pnpm add @cloud-ru/ds-tabsimport { Tabs } from '@cloud-ru/ds-tabs'
<Tabs.Content value='overview'>…</Tabs.Content>Примеры использования
Пара Tab + TabContent
tsx
import { Tabs } from '@cloud-ru/ds-tabs';
export function WithContent() {
return (
<Tabs defaultValue='a'>
<Tabs.TabBar>
<Tabs.Tab value='a' label='Первая' />
<Tabs.Tab value='b' label='Вторая' />
</Tabs.TabBar>
<Tabs.TabContent value='a'>
<div style={{ padding: '12px 0' }}>Контент первого таба</div>
</Tabs.TabContent>
<Tabs.TabContent value='b'>
<div style={{ padding: '12px 0' }}>Контент второго таба</div>
</Tabs.TabContent>
</Tabs>
);
}Props
Types
Props
TabContentProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | — | no | |
className | string | — | no | |
data-test-id | string | — | no | |
value | string | — | yes | Значение таба |