<Tabs> ComponentGeneral purpose tabs component. Used heavily across all websites, but especially heavily on Learn.
| 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.tooltipstring | Optional tooltip to be displayed next to the tab title |
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. |
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.