tabs

Import

import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@xpanseinc/nebula'

Usage

Tab Panel 1

<Tabs>
  <TabList>
    <Tab>
      Tab 1
    </Tab>

    <Tab>
      Tab 2
    </Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <div css={(theme) => ({ padding: theme.spacing[16] })}>
        Tab Panel 1
      </div>
    </TabPanel>

    <TabPanel>
      <div css={(theme) => ({ padding: theme.spacing[16] })}>
        Tab Panel 2
      </div>
    </TabPanel>
  </TabPanels>
</Tabs>

Default tab

Pass a defaultIndex to make a tab initially active.

Tab Panel 1

<Tabs defaultIndex={1}>
  <TabList>
    <Tab>
      Tab 1
    </Tab>

    <Tab>
      Tab 2
    </Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <div css={(theme) => ({ padding: theme.spacing[16] })}>
        Tab Panel 1
      </div>
    </TabPanel>

    <TabPanel>
      <div css={(theme) => ({ padding: theme.spacing[16] })}>
        Tab Panel 2
      </div>
    </TabPanel>
  </TabPanels>
</Tabs>

Tab onChange

The onChange callback returns the selected tab index whenever the active tab changes.

Tab Panel 1

<Tabs onChange={handleChange}>
  <TabList>
    <Tab>
      Tab 1
    </Tab>

    <Tab>
      Tab 2
    </Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <div css={(theme) => ({ padding: theme.spacing[16] })}>
        Tab Panel 1
      </div>
    </TabPanel>

    <TabPanel>
      <div css={(theme) => ({ padding: theme.spacing[16] })}>
        Tab Panel 2
      </div>
    </TabPanel>
  </TabPanels>
</Tabs>

Disabled tabs

When a tab is disabled it will not be clickable and skipped in keyboard navigation.

Tab Panel 1

<Tabs>
  <TabList>
    <Tab>
      Tab 1
    </Tab>

    <Tab>
      Tab 2
    </Tab>

    <Tab disabled>
      Tab 3
    </Tab>

    <Tab>
      Tab 4
    </Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <div css={(theme) => ({ padding: theme.spacing[16] })}>
        Tab Panel 1
      </div>
    </TabPanel>

    <TabPanel>
      <div css={(theme) => ({ padding: theme.spacing[16] })}>
        Tab Panel 2
      </div>
    </TabPanel>

    <TabPanel>
      <div css={(theme) => ({ padding: theme.spacing[16] })}>
        Tab Panel 3
      </div>
    </TabPanel>

    <TabPanel>
      <div css={(theme) => ({ padding: theme.spacing[16] })}>
        Tab Panel 4
      </div>
    </TabPanel>
  </TabPanels>
</Tabs>