Skip to main content

    Tabs

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

    OverviewPropertiesUsage

    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
    Still have questions?
    Find answers in the Dynatrace Community