@snack-uikit/tabs NPM | npm.io

0.10.4 • Published 7 months ago

Install

Weekly downloads

-

License

Apache-2.0

Repository

Last release

7 months ago

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-класс

@snack-uikit/button @snack-uikit/counter @snack-uikit/divider @snack-uikit/icons @snack-uikit/typography @snack-uikit/utils classnames react-indiana-drag-scroll uncontrollable

@everything-registry/sub-chunk-847

0.9.4-preview-abb5f7dc.0

10 months ago

1 year ago

1 year ago

1 year ago

0.9.4-preview-a2a64ca4.0

11 months ago

0.9.7-preview-bc9ca5dd.0

10 months ago

0.10.5-preview-69fcfa33.0

7 months ago

0.9.4-preview-f7ec3fa7.0

11 months ago

0.9.3-preview-08c7f775.0

11 months ago

0.8.5-preview-baf754b1.0

1 year ago

10 months ago

10 months ago

0.9.4-preview-e840ab81.0

11 months ago

10 months ago

11 months ago

0.10.2-preview-790689b4.0

10 months ago

10 months ago

10 months ago

0.9.3-preview-985e2518.0

11 months ago

0.8.5-preview-7eeb1bc1.0

1 year ago

10 months ago

10 months ago

8 months ago

8 months ago

0.10.5-preview-050dc1ef.0

7 months ago

0.9.1-preview-bb2cdfb8.0

12 months ago

0.9.4-preview-f228eb9d.0

10 months ago

10 months ago

0.9.4-preview-d479ae3f.0

10 months ago

0.9.4-preview-b5e187d5.0

11 months ago

0.10.5-preview-9998cc23.0

7 months ago

0.9.3-preview-913f1101.0

12 months ago

0.9.7-preview-9cd1b89a.0

10 months ago

0.9.1-preview-38cf19d9.0

12 months ago

1 year ago

1 year ago

0.8.5-preview-042f5ed6.0

1 year ago

0.9.7-preview-27ae78ba.0

10 months ago

0.10.4-preview-845a4e8b.0

8 months ago

0.9.4-preview-74c13173.0

10 months ago

0.10.4-preview-2f8a726b.0

8 months ago

0.8.2-preview-9a7f316b.0

1 year ago

0.9.7-preview-0d45398a.0

10 months ago

0.9.5-preview-3566ac3d.0

10 months ago

1 year ago

0.10.5-preview-e4e8fc7b.0

7 months ago

12 months ago

12 months ago

0.8.5-preview-4d81b82b.0

1 year ago

0.10.3-preview-ef227a87.0

9 months ago

0.8.5-preview-53bd8747.0

1 year ago

0.9.1-preview-a2f98ef7.0

12 months ago

0.9.8-preview-6a400eba.0

10 months ago

0.8.5-preview-379c4ff3.0

1 year ago

0.10.3-preview-8cf89a18.0

9 months ago

0.10.4-preview-cf198ddd.0

8 months ago

0.9.4-preview-922d2ce6.0

10 months ago

0.9.7-preview-a0074739.0

10 months ago

0.8.5-preview-20b0f520.0

1 year ago

0.10.5-preview-aba585d4.0

7 months ago

0.10.5-preview-2df7e7b5.0

7 months ago

0.9.4-preview-704e8703.0

11 months ago

0.6.18-preview-71543426.0

1 year ago

1 year ago

0.6.18-preview-ba12ca94.0

1 year ago

1 year ago

1 year ago

0.6.18-preview-efee0b7d.0

1 year ago

0.6.18-preview-e5174ad1.0

1 year ago

0.6.18-preview-fc25f08d.0

1 year ago

0.6.18-preview-7adaddbe.0

1 year ago

0.6.18-preview-3f66d646.0

1 year ago

0.6.18-preview-1f246c4a.0

1 year ago

0.6.18-preview-c9b51578.0

1 year ago

0.6.18-preview-d96c83e8.0

1 year ago

0.6.15-preview-8898cdde.0

1 year ago

0.6.15-preview-3201b907.0

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

0.6.14-preview-b09d21bf.0

1 year ago

0.6.16-preview-31958b7e.0

1 year ago

0.6.17-preview-94780dcd.0

1 year ago

0.6.11-preview-dff5750f.0

2 years ago

0.6.11-preview-8bb3334c.0

2 years ago

2 years ago

2 years ago

0.6.11-preview-fa3ea861.0

2 years ago

0.6.11-preview-e82f86de.0

2 years ago

2 years ago

2 years ago

0.6.9-preview-cb79db34.0

2 years ago

0.6.9-preview-7a18c2ee.0

2 years ago

0.6.9-preview-08779a44.0

2 years ago

0.6.9-preview-5b75040d.0

2 years ago

0.6.9-preview-69abc1d3.0

2 years ago

0.6.9-preview-80576138.0

2 years ago

0.6.9-preview-0a44b2fc.0

2 years ago

0.6.9-preview-2855fb42.0

2 years ago

2 years ago

2 years ago

2 years ago

0.6.7-preview-da21d728.0

2 years ago

0.6.7-preview-3bc93fc3.0

2 years ago

0.6.6-preview-3cdd8d31.0

2 years ago

2 years ago

0.6.5-preview-993a9cfb.0

2 years ago

2 years ago

2 years ago

0.6.3-preview-3f90b7f1.0

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

0.3.17-preview-85c5f47b.0

2 years ago