A tabular view component

bit import grommet.react-components/controls/tabs

A tabular view component. The Tabs component contains one or more Tab components.

Example

import Tabs from 'grommet/components/Tabs';

<Tabs>
  <Tab title='First Title'>
    <Paragraph>
      First contents
    </Paragraph>
    <input type='text'
      value=''
      onChange={...} />
  </Tab>
  <Tab title='Second Title'>
    <Paragraph>
      Second contents
    </Paragraph>
    <input type='text'
      value=''
      onChange={...} />
  </Tab>
</Tabs>
NameTypeDescription
activeIndexPropTypes.number

Active tab index. Defaults to 0.

justify["start", "center", "end"]

How to align the tabs along the main axis. Defaults to center.

responsivePropTypes.bool

Whether the row of tabs should be switched to a centered column layout when the display area narrows. Defaults to true.

onActivePropTypes.func

Function that will be called with the active tab index when the currently active tab changes.

titlePropTypes.node

Label for the tab. This property is required.

Test Summary

has correct default optionsTests didn't run
has correct activeIndex=0 renderingTests didn't run