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

Basic

<Tabs defaultValue="tab-3">
  <TabsItem value="tab-1" label="Tab 1">
    Tab 1 content
  </TabsItem>
  <TabsItem value="tab-2" label="Another tab with a longer name">
    Tab 2 content
  </TabsItem>
  <TabsItem value="tab-3" label="A tab open by default">
    Tab 3 content
  </TabsItem>
</Tabs>

Render Callback

function render() {
  const items = new Array(10000).fill().map((_, i) => ({
    value: i,
    content: `Tab ${i} content...`,
    label: `Item ${i}`,
  }));


  return (
    <div className="nr1-Example--tabs">
      <Tabs items={items}>
        {({ item }) => (
          <TabsItem value={item.value} label={item.label}>
            {item.content}
          </TabsItem>
        )}
      </Tabs>
    </div>
  );
}

Props

ariaLabel

string

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

children

REQUIRED

node|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.

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

defaultValue

any

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.

items

shape[]

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

value

REQUIRED

any

label

REQUIRED

string

disabled

boolean

function render() {
  const items = [
    { label: 'a', value: 'x', foo: 'bar' },
    { label: 'b', value: 'y', disabled: false, foo: 'baz' },
    { label: 'c', value: 'z', disabled: true, foo: 'foobar' },
  ];

  return (
    <Tabs items={items}>
      {({ item }) => (
        <TabsItem value={item.value} label={item.label}>
          {item.foo}
        </TabsItem>
      )}
    </Tabs>
  );
}

onChange

function

Callback fired any time the selected tab changes.

function (value: any The value of the selected tab item.
)

spacingType

enum[]

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,
>
>

style

object

Inline style for custom styling.

testId

string

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.

value

any

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.
}

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

Render Callback

Props

string

REQUIRED

node|function

string

any

shape[]

shape

REQUIRED

any

REQUIRED

string

boolean

function

enum[]

object

string

any

Type definitions

RenderCallbackArguments

Usage

`RenderCallbackArguments`