Tabs
Набор вкладок с выбранным индексом.
Передайте массив Tab как дочерние элементы. theme задаёт оформление: line (по умолчанию), pill или pill-secondary. index включает управляемый режим, defaultIndex — начальную вкладку. onChange получает индекс и событие; вызывается и при переключении с клавиатуры — стрелками, Home и End. Разметка использует роли tablist, tab и tabpanel.
Живой пример
Content for "One" tab
Настройки примера
Использование
import { Tab, Tabs } from '@prosazhin/pbcomponents';
<Tabs
defaultIndex={0}
theme='pill'
>
{['One', 'Two', 'Three', 'Four', 'Five'].map((label) => (
<Tab
key={label}
label={label}
>
<div style={{ marginTop: 24 }}>{`Content for "${label}" tab`}</div>
</Tab>
))}
</Tabs>;API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | Tab[] | Вкладки с label и содержимым. | — |
theme | 'line' | 'pill' | 'pill-secondary'line · pill · pill-secondary | Оформление вкладок; передаётся всем Tab. | line |
index | number | Активная вкладка в управляемом режиме. | — |
defaultIndex | number0 · 1 · 2 · 3 · 4 | Индекс начальной активной вкладки. | 0 |
onChange | (index: number, event: MouseEvent | KeyboardEvent) => void | Вызывается при выборе вкладки мышью или стрелками, Home и End. | — |
className | string | Класс корневого элемента. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.