Tab
Одна вкладка для Tabs или самостоятельной навигации.
label задаёт подпись, active отмечает активную вкладку, href превращает её в ссылку. theme задаёт оформление (line, pill, pill-secondary), badge добавляет бейдж справа от подписи.
Живой пример
Настройки примера
Использование
import { Tab } from '@prosazhin/pbcomponents';
<Tab
label='Tab'
active={false}
/>;API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
label | string | Текст вкладки. | — |
active | boolean | Активное состояние отдельно стоящей вкладки. | false |
indicator | boolean | Линия под активной вкладкой. | true |
theme | 'line' | 'pill' | 'pill-secondary'line · pill · pill-secondary | Оформление вкладки. | line |
badge | ReactElement<BadgeProps> | Бейдж справа от подписи. | — |
disabled | boolean | Блокирует взаимодействие. | false |
leftIcon | SvgTypenone · check · search · user | Иконка перед текстом; принимает SVG-компонент. | — |
rightIcon | SvgTypenone · check · search · user | Иконка после текста; принимает SVG-компонент. | — |
leftIconClassName | string | Класс левой иконки. | — |
rightIconClassName | string | Класс правой иконки. | — |
onClick | (event) => void | Обработчик нажатия на вкладку. | — |
href | string | Рендерит ссылку вместо кнопки. | — |
linkComponent | ElementType | Компонент ссылки, например Next.js Link. | — |
target | '_self' | '_blank'_self · _blank | Где открыть ссылку. | _self |
type | 'button' | 'reset' | 'submit'button · reset · submit | Тип HTML-кнопки. | button |
className | string | Класс корневого элемента. | — |
textClassName | string | Класс текстовой части. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.