@snack-uikit/tabs v0.10.4
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-класс |
6 months ago
9 months ago
9 months ago
9 months ago
6 months ago
6 months ago
3 months ago
6 months ago
7 months ago
9 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
7 months ago
9 months ago
6 months ago
6 months ago
4 months ago
4 months ago
3 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
3 months ago
7 months ago
6 months ago
8 months ago
10 months ago
10 months ago
9 months ago
6 months ago
4 months ago
6 months ago
4 months ago
10 months ago
6 months ago
6 months ago
9 months ago
3 months ago
7 months ago
8 months ago
9 months ago
5 months ago
9 months ago
8 months ago
6 months ago
9 months ago
4 months ago
4 months ago
6 months ago
6 months ago
9 months ago
3 months ago
3 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago