Skip to main content

Tabs

Tabs component allows users to organize content into multiple sections which allow users to navigate between them. Each content under the tabs component should be related to a coherent unit.

installversionusagestyle
yarn add @ciceksepeti/cui-tabs1.0.0import {Tabs, TabList, Tab, TabPanelList, TabPanel} from '@ciceksepeti/cui-tabs'import '@ciceksepeti/cui-tabs/style.css'
web3consorcium
Wai-AriaW3
web3consorcium
RepositoryGitHub
web3consorcium
PackageNPM
web3consorcium
StyleSass

Content​

The Tabs component consists of clickable tabs, that are aligned side by side. Tabs make it easy to explore and switch between different views. Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Examples​

Default​

Example of a default behavior of Tabs component. Renders as 'div' by default

import {
  Tabs,
  TabList,
  Tab,
  TabPanelList,
  TabPanel,
} from '@ciceksepeti/cui-tabs';
import '@ciceksepeti/cui-tabs/styles.css';

const Example = () => {
  return (
    <Tabs>
      <TabList>
        <Tab>Tab1</Tab>
        <Tab disabled>Tab2</Tab>
        <Tab disabled>Tab3</Tab>
        <Tab>Tab4</Tab>
        <Tab disabled>Tab5</Tab>
      </TabList>
      <TabPanelList>
        <TabPanel>Panel1</TabPanel>
        <TabPanel>Panel2</TabPanel>
        <TabPanel>Panel3</TabPanel>
        <TabPanel>Panel4</TabPanel>
        <TabPanel>Panel5</TabPanel>
      </TabPanelList>
    </Tabs>
  );
};
PREVIEW
Default

Controlled​

caution

In order to use Tabs component as controlled, user have to give index and onChange properties at the same time.

However, be sure that you have removed defaultIndex prop while you are using controlled component.
import React, { useState } from 'react';

import {
  Tabs,
  TabList,
  Tab,
  TabPanelList,
  TabPanel,
} from '@ciceksepeti/cui-tabs';
import '@ciceksepeti/cui-tabs/styles.css';

const Example = () => {
  const [key, setKey] = useState(0);
  return (
    <Tabs index={key} onChange={(k) => setKey(k)}>
      <TabList>
        <Tab>Tab1</Tab>
        <Tab disabled>Tab2</Tab>
        <Tab disabled>Tab3</Tab>
        <Tab>Tab4</Tab>
        <Tab disabled>Tab5</Tab>
      </TabList>
      <TabPanelList>
        <TabPanel>Panel1</TabPanel>
        <TabPanel>Panel2</TabPanel>
        <TabPanel>Panel3</TabPanel>
        <TabPanel>Panel4</TabPanel>
        <TabPanel>Panel5</TabPanel>
      </TabPanelList>
    </Tabs>
  );
};
PREVIEW
Render Props

Render Props​

Example of a default behavior of Tabs component with render props pattern. Renders as 'div' by default.

import {
  Tabs,
  TabList,
  Tab,
  TabPanelList,
  TabPanel,
} from '@ciceksepeti/cui-tabs';
import '@ciceksepeti/cui-tabs/styles.css';

const Example = () => {
  return (
    <Tabs>
      {({ selectedTabIndex, focusedTabIndex }) => {
        return (
          <>
            <TabList>
              <Tab>Tab1</Tab>
              <Tab disabled>
                {focusedTabIndex === 0 ? 'focus on left' : 'focus on right'}
              </Tab>
              <Tab>{selectedTabIndex === 2 ? 'selected' : 'not selected'}</Tab>
            </TabList>
            <TabPanelList>
              <TabPanel>Panel1</TabPanel>
              <TabPanel>Panel2</TabPanel>
              <TabPanel>Panel3</TabPanel>
            </TabPanelList>
          </>
        );
      }}
    </Tabs>
  );
};
PREVIEW
Render Props

Props​

Tabs Props​

Tabs Events​

TabList Props​

TabList Events​

Keyboard Actions​

Tab Props​

TabPanelList Props​

TabPanel Props​

TabPanel Accessibility​

Styling​

Element Selectors​

Default Selector Values​

Playground​

/img/codesandbox-icon