@elemental-ui-alpha/tabs

Tabs

import { TabItem, TabList } from '@elemental-ui-alpha/tabs';

Usage

let tabs = ['First', 'Second', 'Third'];

return (
  <TabList>
    {tabs.map(tab => (
      <TabItem label={tab} key={tab}>
        <Flex
          align="center"
          foreground="muted"
          justify="center"
          padding="xlarge"
        >
          {tab} panel content
        </Flex>
      </TabItem>
    ))}
  </TabList>
);

Initial Index

Provide an alternative initial index to the tab list.

<TabList initialIndex={1}>
  <TabItem label="First">
    <Flex>First panel content</Flex>
  </TabItem>
  <TabItem label="Second">
    <Flex>Second panel content</Flex>
  </TabItem>
  <TabItem label="Third">
    <Flex>Third panel content</Flex>
  </TabItem>
</TabList>

Appearance

The tab list comes in two appearances:

• weak (default)
• strong

<TabList appearance="strong">
  <TabItem label="First">First panel content</TabItem>
  <TabItem label="Second">Second panel content</TabItem>
  <TabItem label="Third">Third panel content</TabItem>
</TabList>