Tabs
Набор вкладок с выбранным индексом.
Передайте массив Tab как дочерние элементы. onChange получает индекс выбранной вкладки.
Живой пример
Content for "One" tab
Настройки примера
Использование
import { Tab, Tabs } from '@prosazhin/pbcomponents';
<Tabs defaultIndex={0}>
{['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 и содержимым. | — |
defaultIndex | number0 · 1 · 2 · 3 · 4 | Индекс начальной активной вкладки. | 0 |
onChange | (index, event) => void | Вызывается при выборе вкладки. | — |
className | string | Класс корневого элемента. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.