• /
  • Log in

Tabs

Tabs are used to help group various related content into separate sections. Those sections can be all or contained in a portion of the screen. We recommend using one set of tabs per screen and also only using it for different related content types. For example, when you have different data about a single entity, you might bucket the data into different sections.

Do NOT separate an action, like create, from other content sections in tabs. The action should be triggered by an icon or button and open either a modal or stacked page.

Usage

import { Tabs } from 'nr1'

Examples

Props

ariaLabelstring

Provide an accessibility label that describes the purpose of the set of tabs, e.g. "Settings categories".

childrenrequirednode|function

It can be either an array of <TabsItem> elements or a render callback (Function as Children).

When using the render callback items need to be provided through the items prop.

function () => undefined
classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

defaultValueany

value of the <TabsItem> which you want to be selected by default when the component mounts.

If not defined, the first tab item will be selected by default.

itemsshape[]

The items to render, which required when rendering items with the render callback (Function as Children).

The item must contain value and label properties, and optionally a disabled boolean property. This item will be provided as an argument to the render callback.

shape

valuerequiredany
labelrequiredstring
disabledboolean
onChangefunction

Callback fired any time the selected tab changes.

function (
value: any //

The value of the selected tab item.

) => undefined
spacingTypeenum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT.

<Array of
<One of
Tabs.SPACING_TYPE.EXTRA_LARGE,
Tabs.SPACING_TYPE.LARGE,
Tabs.SPACING_TYPE.MEDIUM,
Tabs.SPACING_TYPE.NONE,
Tabs.SPACING_TYPE.OMIT,
Tabs.SPACING_TYPE.SMALL,
>
>
styleobject

Inline style for custom styling.

testIdstring

Adds a data-test-id.

Used to target the component in unit and e2e testing.

valueany

When you need to have a tab other than the first open by default, use the pre-selected tab. Before using this option, we recommend considering if you have the right tab order for your experience.

If defined, it turns the component into a controlled component.

Methods

Tabs.render

function () => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.