WUI logo

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'

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 #
NameType(s)DefaultRequired
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`.

Tab.List #
NameType(s)DefaultRequired
selectedId
string

The current selected tab's `id`.

size
"sm"
"md"
Tab.Panel #
NameType(s)DefaultRequired
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

Pagination

Next

Emoji