Tabs

The Tabs component allows for switching views, and can be easily controlled by the parent component.

Where possible, an enum should be used to define the individual Tab order and children values.

Examples

Tabs

() => {
  const TABS = {
    cats: {
      id: 'cats and permissions',
      index: 0,
    },
    dogs: {
      id: 'dogs',
      index: 1
    },
    rabbits: {
      id: 'rabbits',
      index: 2
    }
  }

  return (
    <TabsProvider>
      <TabList label="Animal tabs">
        <Tab index={TABS.cats.index}>{TABS.cats.id}</Tab>
        <Tab index={TABS.dogs.index}>{TABS.dogs.id}</Tab>
        <Tab index={TABS.rabbits.index}>{TABS.rabbits.id}</Tab>
      </TabList>
      <TabPanel index={TABS.cats.index}>Cat content here</TabPanel>
      <TabPanel index={TABS.dogs.index}>Dog content here</TabPanel>
      <TabPanel index={TABS.rabbits.index}>Rabbit content here</TabPanel>
    </TabsProvider>
  )
}

Default Tab Selected

() => {
  const TABS = {
    cats: {
      id: 'cats',
      index: 0,
    },
    dogs: {
      id: 'dogs',
      index: 1
    },
    rabbits: {
      id: 'rabbits',
      index: 2
    }
  }

  return (
    <TabsProvider defaultTab={2}>
      <TabList label="Animal tabs">
        <Tab index={TABS.cats.index}>{TABS.cats.id}</Tab>
        <Tab index={TABS.dogs.index}>{TABS.dogs.id}</Tab>
        <Tab index={TABS.rabbits.index}>{TABS.rabbits.id}</Tab>
      </TabList>
      <TabPanel index={TABS.cats.index}>Cat content here</TabPanel>
      <TabPanel index={TABS.dogs.index}>Dog content here</TabPanel>
      <TabPanel index={TABS.rabbits.index}>Rabbit content here</TabPanel>
    </TabsProvider>
  )
}