• /
  • Log in
  • Free account

Tabs

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.

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.

)
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 attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.

For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

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.

Type definitions

RenderCallbackArguments

{
item: any,

Item to render.

index: number,

Index of the item in the items array.

items: any[],

Array of items which we're iterating on.

}
Create issueEdit page
Copyright © 2021 New Relic Inc.