@asphalt-react/tab

Tab

Tab component can be used to quickly navigate and access different views within the same context. There are primarily 2 variations of tabs:

1. Synchronous: Sync tabs expect static content. These tabs get activated on receiving focus.
2. Asynchronous: Async tabs expect content to be asynchronously fetched. Tabs can be marked asynchronous via async prop. These are activated on user action.

The active prop determines the active tab. The onAction prop requires a function, which is needed to determine the URL for each tab.

Tab contains a suite of sub-components which are required for it to work. They are TabLabels, TabPanes, TabLabel and TabPane. You can read about these in detail later below in this page.

⚠️ Tab must have atleast 2 TabLabel and 2 TabPane components, otherwise it will show a warning in the browser's console.

Usage

import Tab, { TabLabels, TabLabel, TabPanes, TabPane } from "@asphalt-react/tab"
;<Tab>
  <TabLabels>
    <TabLabel id="tab1" forPane="pane1">
      Tab 1
    </TabLabel>
    <TabLabel id="tab2" forPane="pane2">
      Tab 2
    </TabLabel>
  </TabLabels>

  <TabPanes>
    <TabPane id="pane1">Content 1</TabPane>
    <TabPane id="pane2">Content 2</TabPane>
  </TabPanes>
</Tab>

Accessibility

• Use ← or → arrow keys to toggle between tabs
• For asynchronous tabs, press enter to activate the tab
• All the required aria-* attributes and roles are applied

Props

children

React node containig content for tab

type	required	default
node	true	N/A

active

ID of the active tab

type	required	default
string	true	N/A

onAction

Function to be called when active tab changes.

The argument is an object which contains the ID of the active tab and the event object

onAction={({ id, event }) => console.log(`active tab: ${id}, target: ${event.target}`)}

type	required	default
func	false	N/A

async

When the content of the tabs are asynchronous, use this prop to enable manual activation of the tab.

type	required	default
bool	false	false

TabLabels

This component acts as a wrapper around all the TabLabel components

Props

children

Collection of TabLabel components

type	required	default
union	true	N/A

TabLabel

Use TabLabel to create each tab. Each TabLabel must be associated with a TabPanel

Props

children

Title for the tabLabel

type	required	default
node	true	N/A

id

ID of respective tabLabel

type	required	default
string	true	N/A

forPane

ID of the TabPane to which this tabLabel belongs

type	required	default
string	true	N/A

as

HTML element/React component to be rendered

type	required	default
elementType	false	"a"

tagProps

Props for the link element

type	required	default
object	false	{ href: "#" }

TabPanes

This component acts as a wrapper for all TabPane components

Props

children

Collection of TabPane components

type	required	default
union	false	N/A

TabPane

TabPane contains the views or content for each tab.

Props

children

Content for each tab

type	required	default
node	true	N/A

id

ID of each tabPane

type	required	default
string	true	N/A