Tabs
Allows user to make it easy explore and switch between different views.
version
5.0.0-alpha.32
install
yarn add @welcome-ui/tabs
usage
import { Tabs, useTabState } from '@welcome-ui/tabs'
About #
See Reakit for documentation.
Usage #
Set the tab activated by default using selectedId on useTabState.
Sizes #
Size is set on Tab.List. Available sizes are sm and md. By default size is set to md.
With no border #
The border on Tab.List is an inset shadow that you can customize or disable via the boxShadow style prop
With a badge #
Add badges, icons and images in tab.
Use another component #
Use another component in tab.
One tab #
Active bar doesn't display with only one tab.
Vertical #
Set the tab orientation by providing the orientation prop to the tab state
Properties #
Tab #
| Name | Type(s) | Default | Required |
|---|
Tab.List #
| Name | Type(s) | Default | Required |
|---|---|---|---|
| size | "sm" "md" | md |
Tab.Panel #
| 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. |
Packages #
Dependencies #
Peer dependencies #
Previous
PaginationNext
Emoji