Share your code. Components are building blocks, you are the architect.

controls/tabs
v0.0.3
0.0.3
0.0.2
0.0.1

A tabular view component

Gravatar for undefined
grommet
Contributors
Gravatar for undefined
1

Please configure Bit as a scoped registry to install components with NPM.Learn more

npm config set '@bit:registry' https://node.bitsrc.io
Use controls/tabs in your project
npm i @bit/grommet.react-components.controls.tabs
Copied

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