Usage
import { Tabs } from 'nr1'Examples
Props
Provide an accessibility label that describes the purpose of the set
of tabs, e.g. "Settings categories".
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.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
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.
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
Callback fired any time the selected tab changes.
function (value: any The value of the selected tab item.
)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 ofTabs.SPACING_TYPE.EXTRA_LARGE,Tabs.SPACING_TYPE.LARGE,Tabs.SPACING_TYPE.MEDIUM,Tabs.SPACING_TYPE.NONE,Tabs.SPACING_TYPE.OMIT,Tabs.SPACING_TYPE.SMALL,>>Inline style for custom styling.
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.
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.
}