Tabs

Allows user to make it easy explore and switch between different views.

version

5.0.0-alpha.16

install

yarn add @welcome-ui/tabs

usage

import { Tabs, useTabState } from '@welcome-ui/tabs'

See Reakit for documentation.

Set the tab activated by default using selectedId on useTabState.

Size is set on Tab.List. Available sizes are sm and md. By default size is set to md.

The border on Tab.List is an inset shadow that you can customize or disable via the boxShadow style prop

Add badges, icons and images in tab.

Use another component in tab.

Active bar doesn't display with only one tab.

Set the tab orientation by providing the orientation prop to the tab state

Name	Type(s)	Default	Required
manual	Boolean Whether the tab selection should be manual.
panels	Item[] Lists all the panels.
selectedId	string The current selected tab's `id`.
select	(id: string) => void Moves into and selects a tab by its `id`.

Name	Type(s)	Default	Required
selectedId	string The current selected tab's `id`.
size	"sm" "md"

Name	Type(s)	Default	Required
selectedId	string The current selected tab's `id`.
registerPanel	(item: Item) => void Registers a tab panel.
unregisterPanel	(id: string) => void Unregisters a tab panel.
panels	Item[] Lists all the panels.