silverstripe-framework/admin/client/src/components/Tabs/README.md

Tabs

For separating content into tabs without the need for separate pages.

This extends from react-bootstrap with similar expected behaviours, only difference is that when there is only one tab (or none) in the Tabset, then only the content will show without the clickable tab.

Example

<Tabs defaultActiveKey="Main" id="Root">
    <TabItem name="Main" title="Main">
        My first tab content
    </TabItem>
    <TabItem name="Settings" title="Settings">
        My settings tab here
    </TabItem>
</Tabs>

Tabs Properties

• id (string) (required): The ID for the Tabset.
• defaultActiveKey (string): The default tab to open, should match the name of a child TabItem, will default to the first Tab child.
• extraClass (string): Extra classes the Tabset should have.
• activeKey (string): Used with onSelect action handler, forces the given tab to open, should match the name of a child TabItem.
• onSelect (function): Action handler for when a tab is clicked, if an override for the default functionality is required, will need to handle own state.
• animation (boolean): Whether to animate when transitioning between tabs.
• bsStyle (enum): "tabs"|"pills" change the style of the tabs.
• unmountOnExit (boolean): Whether to remove the Tab content from the DOM when it's hidden.

TabItem Properties

• name (string) (required): A key to match the activeKey or defaultActiveKey property in the Tabs component to show the content. This replaces the eventKey property.
• title (string): The label to display for the tab, can be set null to hide the tab.
• disabled (boolean): Whether the Tab is clickable, or greyed out.
• extraClass (string): Extra classes the Tab should have.
• bsClass (string): Changes tab-pane bootstrap class to use something else.
• tabClassName (string): Class to give tab title.

Animation callbacks

• onEnter onEntering onEntered - different stages for when a tab is opened.
• onExit onExiting onExited - different stages for when a tab is closed.

Not recommended properties, if using Tabs component:

• animation (boolean|ReactElement): Animation when transitioning between tabs.
• id (string): Identifier for TabItem, this is generated by the Tabs component.
• aria-labelledby (string): Accessibility, provides information about the TabItem, generated by the Tabs component.
• unmountOnExit (boolean): Whether to remove the Tab content from the DOM when it's hidden.