TabPanel item with addons

You can add icons, badges, and counters as addons to the left or right of the text in the item.

Try resizing the page to see how the tabs adjust. If the text in a tab is too long, it will be truncated with ellipsis and a hint will be shown on hover and focus.

import FacebookM from '@semcore/icon/Facebook/m';
import InstagramM from '@semcore/icon/Instagram/m';
import TwitterM from '@semcore/icon/Twitter/m';
import Badge from '@semcore/ui/badge';
import TabPanel from '@semcore/ui/tab-panel';
import React from 'react';

const Demo = () => {
  const [value, setValue] = React.useState(1);
  return (
    <>
      <TabPanel value={value} onChange={setValue} aria-label='Social network reports'>
        <TabPanel.Item
          value={1}
          aria-controls={value === 1 ? 'tab-panel-4-1' : undefined}
          id='tab-label-4-1'
        >
          <TabPanel.Item.Addon>
            <FacebookM />
          </TabPanel.Item.Addon>
          <TabPanel.Item.Text>Facebook</TabPanel.Item.Text>
        </TabPanel.Item>
        <TabPanel.Item
          value={2}
          aria-controls={value === 2 ? 'tab-panel-4-2' : undefined}
          id='tab-label-4-2'
        >
          <TabPanel.Item.Addon>
            <InstagramM />
          </TabPanel.Item.Addon>
          <TabPanel.Item.Text>Instagram</TabPanel.Item.Text>
          <TabPanel.Item.Addon>
            <Badge type='new'>new</Badge>
          </TabPanel.Item.Addon>
        </TabPanel.Item>
        <TabPanel.Item
          value={3}
          aria-controls={value === 3 ? 'tab-panel-4-3' : undefined}
          id='tab-label-4-3'
        >
          <TabPanel.Item.Addon>
            <TwitterM />
          </TabPanel.Item.Addon>
          <TabPanel.Item.Text>Twitter</TabPanel.Item.Text>
        </TabPanel.Item>
      </TabPanel>
      {
        [
          <div key='tab-panel-4-1' id='tab-panel-4-1' role='tabpanel' aria-labelledby='tab-label-4-1' tabIndex={-1}>
            <h3>Facebook</h3>
            <p>
              It's where your aunt's cat has more followers than you, and your high school nemesis
              still thinks they're relevant.
            </p>
          </div>,
          <div
            key='tab-panel-4-2'
            id='tab-panel-4-2'
            aria-hidden='true'
            role='tabpanel'
            aria-labelledby='tab-label-4-2'
            tabIndex={-1}
          >
            <h3>Instagram</h3>
            <p>
              It's where people spend hours perfecting their avocado toast just for a 'like', and
              your explore page thinks you need therapy based on your search history.
            </p>
          </div>,
          <div
            key='tab-panel-4-3'
            id='tab-panel-4-3'
            aria-hidden='true'
            role='tabpanel'
            aria-labelledby='tab-label-4-3'
            tabIndex={-1}
          >
            <h3>Twitter</h3>
            <p>
              It's where 280 characters can start a revolution or a feud over pineapple on pizza,
              and your timeline is a mix of breaking news and cat memes.
            </p>
          </div>,
        ][value - 1]
      }
    </>
  );
};

export default Demo;

Disabled TabPanel item

Use disabled property to make <TabPanel.Item /> disabled. Always add Tooltip to explain why this item is disabled.

import TabPanel from '@semcore/ui/tab-panel';
import Tooltip from '@semcore/ui/tooltip';
import React from 'react';

const Demo = () => {
  const [value, setValue] = React.useState(1);
  return (
    <>
      <TabPanel value={value} onChange={setValue} aria-label='Social network reports'>
        <TabPanel.Item
          value={1}
          aria-controls={value === 1 ? 'tab-panel-2-1' : undefined}
          id='tab-label-2-1'
        >
          <TabPanel.Item.Text>Normal tab</TabPanel.Item.Text>
        </TabPanel.Item>
        <Tooltip
          title='Do not forget to add short text to explain why this item is disabled.'
          placement='top'
          role='tab'
        >
          <TabPanel.Item value={2} disabled>
            <TabPanel.Item.Text>Disabled tab</TabPanel.Item.Text>
          </TabPanel.Item>
        </Tooltip>
      </TabPanel>
      {
        [
          <div key='2-1' id='tab-panel-2-1' role='tabpanel' aria-labelledby='tab-label-2-1' tabIndex={-1}>
            <h3>Normal tab</h3>
            <p>
              Here you can place your content, or just leave it blank for that avant-garde
              minimalist vibe.
            </p>
          </div>,
        ][value - 1]
      }
    </>
  );
};

export default Demo;

Automatic tab activation

By default, when using keyboard interaction, user has to confirm tab selection by pressing Enter or Space.

You can set behavior='auto' to change this behavior, so that tabs are activated immediately when selected.

import TabPanel from '@semcore/ui/tab-panel';
import React from 'react';

const Demo = () => {
  const [value, setValue] = React.useState(1);

  return (
    <>
      <TabPanel onChange={setValue} value={value} behavior='auto' aria-label='Animals'>
        <TabPanel.Item
          value={1}
          aria-controls={value === 1 ? 'tab-panel-1-1' : undefined}
          id='tab-label-1-1'
        >
          Cats
        </TabPanel.Item>
        <TabPanel.Item
          value={2}
          aria-controls={value === 2 ? 'tab-panel-1-2' : undefined}
          id='tab-label-1-2'
        >
          Dogs
        </TabPanel.Item>
        <TabPanel.Item
          value={3}
          aria-controls={value === 3 ? 'tab-panel-1-3' : undefined}
          id='tab-label-1-3'
        >
          Birds
        </TabPanel.Item>
      </TabPanel>
      {
        [
          <div key='tab-panel-1-1' id='tab-panel-1-1' role='tabpanel' aria-labelledby='tab-label-1-1' tabIndex={-1}>
            <h3>Cats</h3>
            <p>
              They are the only creatures that can simultaneously demand your attention and ignore
              you completely, while plotting world domination from the top of the refrigerator.
            </p>
          </div>,
          <div
            key='tab-panel-1-2'
            id='tab-panel-1-2'
            aria-hidden='true'
            role='tabpanel'
            aria-labelledby='tab-label-1-2'
            tabIndex={-1}
          >
            <h3>Dogs</h3>
            <p>
              They are the eternal optimists who believe that every stranger is a potential friend
              and every walk is an adventure, even if it's just to the mailbox.
            </p>
          </div>,
          <div
            key='tab-panel-1-3'
            id='tab-panel-1-3'
            aria-hidden='true'
            role='tabpanel'
            aria-labelledby='tab-label-1-3'
            tabIndex={-1}
          >
            <h3>Birds</h3>
            <p>
              They are the tiny dinosaurs who sing like they're auditioning for Broadway and have a
              knack for leaving 'gifts' on freshly washed cars.
            </p>
          </div>,
        ][value - 1]
      }
    </>
  );
};

export default Demo;

Custom indents

Since the TabPanel component doesn't have default margins at the edges, to make it fill the entire width of its parent block (which may have its own margins), you can set the desired padding and margin for the TabPanel component like this:

<Box p={5}>
  <TabPanel px={5} mx="-20px" />
</Box>