TabPanel 
Edit
TabPanel is a React component to render an ARIA-compliant TabPanel.
TabPanels organize content across different screens, data sets, and interactions. It has two sections: a list of tabs, and the view to show when tabs are chosen.
Table of contents Table of contents
- Design guidelines
- Development guidelines
Design guidelines Design guidelines
Usage Usage
TabPanels organize and allow navigation between groups of content that are related and at the same level of hierarchy.
Tabs in a set Tabs in a set
As a set, all tabs are unified by a shared topic. For clarity, each tab should contain content that is distinct from all the other tabs in a set.
Anatomy Anatomy
- Container
- Active text label
- Active tab indicator
- Inactive text label
- Tab item
Labels Labels
Tab labels appear in a single row, in the same typeface and size. Use text labels that clearly and succinctly describe the content of a tab, and make sure that a set of tabs contains a cohesive group of items that share a common characteristic.
Tab labels can wrap to a second line, but do not add a second row of tabs.
Active tab indicators Active tab indicators
To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon.
Behavior Behavior
Users can navigate between tabs by tapping the tab key on the keyboard.
Placement Placement
Place tabs above content. Tabs control the UI region displayed below them.
Development guidelines Development guidelines
Usage Usage
import { TabPanel } from '@wordpress/components';
const onSelect = ( tabName ) => {
console.log( 'Selecting tab', tabName );
};
const MyTabPanel = () => (
<TabPanel className="my-tab-panel"
activeClass="active-tab"
onSelect={ onSelect }
tabs={ [
{
name: 'tab1',
title: 'Tab 1',
className: 'tab-one',
},
{
name: 'tab2',
title: 'Tab 2',
className: 'tab-two',
},
] }>
{
( tab ) => <p>{ tab.title }</p>
}
</TabPanel>
);
Props Props
The component accepts the following props:
className className
The class to give to the outer container for the TabPanel
- Type:
String - Required: No
- Default: ”
orientation orientation
The orientation of the tablist (vertical or horizontal)
- Type:
String - Required: No
- Default:
horizontal
onSelect onSelect
The function called when a tab has been selected. It is passed the tabName as an argument.
- Type:
Function - Required: No
- Default:
noop
tabs tabs
An array of objects containing the following properties:
name:(string)Defines the key for the tab.title:(string)Defines the translated text for the tab.className:(string)Optional. Defines the class to put on the tab.
Note: Other fields may be added to the object and accessed from the child function if desired.
- Type:
Array - Required: Yes
activeClass activeClass
The class to add to the active tab
- Type:
String - Required: No
- Default:
is-active
initialTabName initialTabName
Optionally provide a tab name for a tab to be selected upon mounting of component. If this prop is not set, the first tab will be selected by default.
- Type:
String - Required: No
- Default: none
children children
A function which renders the tabviews given the selected tab. The function is passed the active tab object as an argument as defined the the tabs prop.
The element to which the tooltip should anchor.
- Type: (
Object) =>Element - Required: Yes