Coming from Orbiter, you should be aware of the following changes:
orientationhas been removed, not supported.disabledhas been removed, not supported.manualhas been removed. Refer to this sample to quickly match old sizes.
Tabs
Tabs are used to organize content by grouping similar information on the same page.
Anatomy
A Tab uses the following components:
Usage
Sizes
Tabs can vary in size.
Icon
A tab can contain an icon.
Lozenge
A tab can contain a lozenge.
Badge
A tab can contain a badge.
Dynamic Tabs
Tabs items can be rendered dynamically.
Manually Activated Tabs
By default, tabs are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.
The content of a tab should ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some notable latency and this might affect the experience for keyboard and screen reader users.
In this scenario, you should use a manually activated tab, which moves focus without activating the tabs. With the focus on a specific tab, users can activate a tab by pressing Space or Enter.
Variants
Tabs can use different variants.
Fluid
A tabs component can split the width of its container equally between its tabs.
Controlled
The selectedKey state can be handled in a controlled mode.
Disabled
All tabs can be disabled using the isDisabled prop.
Disabled items
An individual Tab can be disabled with the isDisabled prop. Disabled tabs are not focusable, selectable, or keyboard navigable.
In dynamic collections, it may be more convenient to use the disabledKeys prop at the Tabs level instead of isDisabled on individual tabs.
Each key in this list corresponds with the id prop passed to the Tab component, or automatically derived from the values passed to the items prop.
A tab is considered disabled if its id exists in disabledKeys or if it has isDisabled.
Embedded
Tabs can be embedded in other components.
Links
Tabs can be used as links.
Props
Tabs
variant?
The variant of the tabs.
Defaults to standalone.
size?
The size of the tabs.
Defaults to sm.
isFluid?
Whether or not the tabs takes up the width of its container.
selectedKey?
The currently selected key in the collection (controlled).
defaultSelectedKey?
The initial selected key in the collection (uncontrolled).
isDisabled?
Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.
disabledKeys?
The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
keyboardActivation?
Whether tabs are activated automatically on focus or manually.
Defaults to 'automatic'.
children?
The children of the component.
style?
The inline style for the element.
className?
The CSS className for the element.
TabList
Tab
isDisabled?
Whether the tab is disabled.
href?
A URL to link to. See MDN.
hrefLang?
Hints at the human language of the linked URL. SeeMDN.
target?
The target window for the link. See MDN.
rel?
The relationship between the linked resource and the current page. See MDN.
download?
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
ping?
A space-separated list of URLs to ping when the link is followed. See MDN.
referrerPolicy?
How much of the referrer to send when following the link. See MDN.
routerOptions?
Options for the configured client side router.
children?
The children of the component.
className?
The CSS className for the element.
style?
The inline style for the element.
TabPanel
shouldForceMount?
Whether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually.
Defaults to false.
children?
The children of the component.
className?
The CSS className for the element.
style?
The inline style for the element.