<Tabs> ComponentGeneral purpose tabs component. Used heavily across all websites, but especially heavily on Learn.
<Tabs><Tab heading="First Tab"><p>First tab content</p></Tab><Tab heading="Second Tab"><p>Second tab content</p></Tab><Tab heading="Third Tab"><p>Third tab content</p></Tab></Tabs>
| Name | Description |
|---|---|
defaultTabIdxinteger | If set, the tab with the specified ID will be active by default. If not set or if the ID does not match, it will default to 0 |
centeredboolean | If true, the tabs are centered in their container, rather than left-aligned |
fullWidthBorderboolean | If true, the border line underneath the tabs expands to the full width of the container, rather than being slightly padded from the edges |
onChangefunction | Optional callback which is executed when a new tab is selected. Passed (newTabIndex, groupId). |
children*React.ReactNode | Data to be displayed as tabs Object contains nested props, see below: |
children.headingstring | Title of the tab |
children.groupstring | A unique identifier for a tab 'group' that, when active, all Tabs with this id will become active when one is selected. Note it's necessary to wrap the page with TabProvider for this feature to function. |
classNamestring | Optional className to add to the root element |
classNameTabBarstring | Optional className to add to the tabs bar container. Useful for sticky positioning. |
<Tabs><Tab heading="First Tab" /><Tab heading="Second tab with long name"/><Tab heading="Third long name tab" /><Tab heading="Fourth tab lots of tabs" /><Tab heading="Fifth Tab" /><Tab heading="Sixth Tab" /><Tab heading="Seventh tab with an even longer name than the second tab" /></Tabs>
<Tabs onChange={console.log}><Tab heading="First Tab" /><Tab heading="Second tab with long name" /><Tab heading="Third long name tab" /><Tab heading="Fourth tab lots of tabs" /><Tab heading="Fifth Tab" /><Tab heading="Sixth Tab" /></Tabs>
First, second and third tabs should be actively synced based on their matching group property. Note the TabProvider must wrap the page where this component is used for 'groups' to function properly.
<Tabs><Tab heading="First Tab" group="first"><p>First tab content</p></Tab><Tab heading="Second Tab" group="second"><p>Second tab content</p></Tab><Tab heading="Third Tab" group="third"><p>Third tab content</p></Tab></Tabs>
<Tabs><Tab heading="First Tab" group="first"><p>First tab content</p></Tab><Tab heading="Second Tab" group="second"><p>Second tab content</p></Tab><Tab heading="Third Tab" group="third"><p>Third tab content</p></Tab></Tabs>