@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-класс |
5 months ago
8 months ago
9 months ago
8 months ago
6 months ago
5 months ago
2 months ago
6 months ago
6 months ago
8 months ago
5 months ago
5 months ago
6 months ago
5 months ago
6 months ago
5 months ago
5 months ago
5 months ago
6 months ago
8 months ago
5 months ago
5 months ago
3 months ago
3 months ago
2 months ago
7 months ago
6 months ago
5 months ago
5 months ago
6 months ago
2 months ago
7 months ago
5 months ago
7 months ago
9 months ago
9 months ago
8 months ago
5 months ago
3 months ago
5 months ago
3 months ago
9 months ago
5 months ago
5 months ago
8 months ago
2 months ago
7 months ago
7 months ago
8 months ago
4 months ago
8 months ago
7 months ago
5 months ago
8 months ago
4 months ago
3 months ago
6 months ago
5 months ago
8 months ago
2 months ago
2 months ago
6 months ago
10 months ago
10 months ago
10 months ago
9 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
12 months ago
1 year ago
1 year ago
12 months 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
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