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