Tabs

Tabs organize related content by grouping similar information into views or tab panels that are displayed one at a time.

Import

import { Tab, Tabs } from '@dynatrace/strato-components-preview/navigation';

Use cases

CodeSandbox

Use icons in tabs

By using prefixIcon you can add icons to each tab.

CodeSandbox

Disable tab

The disabled prop allows you to disable specific tabs. In the example below, the third tab is disabled.

CodeSandbox

Default open tab

Allows you to open a specific tab when the component is loaded. In the example below, the third tab is open when component is loaded.

CodeSandbox

Control the state

CodeSandbox

Change the panel overflow

The panelOverflow prop allows you to enable/disable vertical scrolling when the content would overflow the tab panel.

CodeSandbox

Keep Tabs mounted

By default, when the Tab content is not visible to the user, it will also be removed from the DOM to prevent unwanted component updates on hidden elements. If you want to keep the Tabs content in the DOM to preserve the state, you can set the keepMounted prop on the component.

CodeSandbox

Props

TabsProps

Signature:

export declare type TabsProps = & ( | );

TabsBaseProps

extends,

Name	Type	Default	Description
disabled?		false	Whether the whole tab group is disabled.
id?		-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
children		-	The collection of tabs to display.
panelOverflow?	|	-	The overflow behavior of the tab panel.

TabsControlledProps

Name	Type	Default	Description
selectedIndex		-	The index of the selected tab.
onChange	(selectedIndex: ) =>	-	Handler that is called when the selected tab changes.

TabsUncontrolledProps

Name	Type	Default	Description
defaultIndex?		-	The default index of the selected tab.

Tab

Use the Tab component to specify the content and title for a single tab.

TabProps

extends, , ,

Name	Type	Default	Description
children		-	Rendered contents of the option.
disabled?		false	Whether the tab should be disabled. If true, the tab cannot be clicked and its tab panel does not render any content.
title		-	The text shown on the tab. This must be unique.
prefixIcon?		-	The prefix icon shown in front of the tab text.
keepMounted?		false	Defines if the tabs content will be kept in the DOM, even if the content is not shown to the user.