Tabs

A tabs component lets you tab between content.

Import

import { Tabs } from '@pixby/ui';

• Tabs: The component that provides the context to the other components.
• Tabs.Menu: Wrapper for Tabs.Tab. Keeps track of the currently selected tab.
• Tabs.Tab: The individual tab button used to navigate between tabs.
• Tabs.Panels: Wrapper for Tabs.Panel. Keeps track of the currently selected panel.
• Tabs.Panel: The individual panel. This is where your content goes.

Usage

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Props

colorScheme

Use the colorScheme prop to change the colors of the tabs. You can use one of the built-in schemes, or pass a list of class names to create your own.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

direction

You can choose the direction of the tabs by using the direction prop. It can be either horizontal or vertical. It defaults to horizontal.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

variant

You can choose the style of the tabs by using the variant prop. It can be either underline or pills. It defaults to underline.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

isFitted

You can make the tabs take up the full width by passing the isFitted prop. This only works when the direction is set to horizontal (that's the default).

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

isLazy

If you don't want to render the children of the panels unless it's active you can use the isLazy prop.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Controlled mode

The tabs component is stateful by default, but can easily be turned in to a controlled component by passing the index and onChange props.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Accessability

Tabs follows the practices for tabs found at WAI-ARIA Authoring Practices.

• Only the active tab is allowed focus.
• Tabbing from the tab gives focus to the current tab panel.
• Using the arrow keys navigates the between tabs.
• Home and End navigates to the start and end of the tabs.
• Tabs.Panel has the role of tabpanel.
• Tabs.Menu has the role of tablist.
• Tabs.Tab has the role of tab.
• Tabs.Panel has aria-hidden when not selected.
• Tabs.Panel has aria-labelledby set to the id of the Tabs.Tab with the same index.