@snack-uikit/tabs
v0.6.16
Published
## Installation `npm i @snack-uikit/tabs`
Downloads
138
Readme
TabBar
Installation
npm i @snack-uikit/tabs
Example
const [value, setValue] = useState('tab1');
<Tabs value={value} onChange={setValue}>
<Tabs.TabBar>
<Tabs.Tab label='Tab 1' value='tab1' counter={12} />
<Tabs.Tab label='Tab 2' value='tab2' />
<Tabs.Tab label='Tab Disabled' value='tab3' disabled />
</Tabs.TabBar>
<Tabs.TabContent className={styles.tab} value='tab1'>
Content of tab1
</Tabs.TabContent>
<Tabs.TabContent className={styles.tab} value='tab2'>
Content of tab2
</Tabs.TabContent>
<Tabs.TabContent className={styles.tab} value='tab3'>
Content of tab3
</Tabs.TabContent>
</Tabs>
Tabs
Props
| name | type | default value | description |
|------|------|---------------|-------------|
| value | string
| - | Текущая вкладка |
| defaultValue | string
| - | Выбранная вкладка по-умолчанию |
| onChange | (id: T) => void
| - | Колбек выбора вкладки |
Tabs.Tab
Props
| name | type | default value | description |
|------|------|---------------|-------------|
| label* | string
| - | Заголовок вкладки. |
| value* | string
| - | Value вкладки. |
| disabled | boolean
| - | Деактивирована ли вкладка. |
| className | string
| - | CSS-класс |
| counter | number
| - | Счетчик, отображающийся внутри кнопки переключения. |
| onClick | (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void
| - | Колбек клика по кнопке переключения. |
Tabs.TabBar
Props
| name | type | default value | description |
|------|------|---------------|-------------|
| children* | ReactElement<TabProps, string \| JSXElementConstructor<any>>[]
| - | Контент (элементы Tabs.Tab) |
| after | ReactNode
| - | Дополнительный слот для кастомного контента справа от табов |
| className | string
| - | CSS-класс |
| type | "primary" | "secondary" | "primary" - Primary
- когда панель табов является верхнеуровневым элементом страницы, замещающим заголовок. - Secondary
- когда панель табов расположена на том же уровне что и остальной контент | Тип панели табов: |
| disableDivider | boolean
| - | |
Tabs.TabContent
Props
| name | type | default value | description |
|------|------|---------------|-------------|
| value* | string
| - | Значение таба |
| className | string
| - | CSS-класс |