@asphalt-react/tab v1.17.0

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

active

ID of the active tab

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}`)}

async

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

TabLabels

This component acts as a wrapper around all the TabLabel components

Props

children

Collection of TabLabel components

TabLabel

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

Props

children

Title for the tabLabel

id

ID of respective tabLabel

forPane

ID of the TabPane to which this tabLabel belongs

as

HTML element/React component to be rendered

tagProps

Props for the link element

TabPanes

This component acts as a wrapper for all TabPane components

Props

children

Collection of TabPane components

TabPane

TabPane contains the views or content for each tab.

Props

children

Content for each tab

id

ID of each tabPane