Tabs

Import Syntax #

import Tabs, { Tab } from 'mineral-ui/Tabs';

Basic Usage #

Place Tab components within Tabs to allow users to navigate related content in the same space. Use label to briefly describe the related content for users of assistive technologies.

Note

All of the following examples apply a height in order to prevent shifting of the layout when Tabs contains content of different lengths.

Fluorite (also called fluorspar) is the mineral form of calcium fluoride, CaF2. It belongs to the halide minerals. It crystallizes in isometric cubic habit, although octahedral and more complex isometric forms are not uncommon. The Mohs scale of mineral hardness, based on scratch hardness comparison, defines value 4 as Fluorite. Fluorite is a colorful mineral, both in visible and ultraviolet light, and the stone has ornamental and lapidary uses. Industrially, fluorite is used as a flux for smelting, and in the production of certain glasses and enamels. The purest grades of fluorite are a source of fluoride for hydrofluoric acid manufacture, which is the intermediate source of most fluorine-containing fine chemicals.

<Tabs defaultSelectedTabIndex={1} label="Minerals" height="7.75em">
  <Tab title="Malachite">
    <Text>{content.malachite}</Text>
  </Tab>
  <Tab title="Fluorite">
    <Text>{content.fluorite}</Text>
  </Tab>
  <Tab title="Magnetite">
    <Text>{content.magnetite}</Text>
  </Tab>
</Tabs>

Tabs Position #

The list of Tabs can be positioned relative to the tab panel with the position prop.

Accessibility Note

Note that keyboard focus goes first to the selected Tab, then to the panel content, even when the position is 'bottom' or 'end'. Because of this, ensure that both the list of Tabs and the panel content are visible on screen together.

Malachite is a copper carbonate hydroxide mineral, with the formula Cu2CO3(OH)2. This opaque, green banded mineral crystallizes in the monoclinic crystal system, and most often forms botryoidal, fibrous, or stalagmitic masses, in fractures and spaces, deep underground, where the water table and hydrothermal fluids provide the means for chemical precipitation.

() => {
   const positions = ['top', 'bottom', 'start', 'end'];

   const tabs = positions.map((position, index) => {
     const tabsProps = {
       position,
       label: 'Minerals',
       height: '7.75em'
     };
     return (
       <Fragment key={index}>
         <Tabs {...tabsProps}>
           <Tab title="Malachite"><Text>{content.malachite}</Text></Tab>
           <Tab title="Fluorite"><Text>{content.fluorite}</Text></Tab>
           <Tab title="Magnetite"><Text>{content.magnetite}</Text></Tab>
         </Tabs>
         {index !== positions.length - 1 && <CardDivider />}
       </Fragment>
     );
   });

   return <DemoLayout>{tabs}</DemoLayout>
 }

Tabs Alignment #

Control the alignment of the list of Tabs with the align prop. Note that a value of 'justify' will force all Tabs to be equal width and maxTabWidth will not apply.

Malachite is a copper carbonate hydroxide mineral, with the formula Cu2CO3(OH)2. This opaque, green banded mineral crystallizes in the monoclinic crystal system, and most often forms botryoidal, fibrous, or stalagmitic masses, in fractures and spaces, deep underground, where the water table and hydrothermal fluids provide the means for chemical precipitation.

() => {
   const alignments = ['start', 'center', 'end', 'justify'];

   const tabs = ({ position } = {}) => alignments.map((alignment, index) => {
     const key = position ? position + '-' + index : index;
     const tabsProps = {
       align: alignment,
       position,
       label: 'Minerals',
       height: position === 'start' ? '10em' : '7.75em'
     };
     return (
       <Fragment key={key}>
         <Tabs {...tabsProps}>
           <Tab title="Malachite"><Text>{content.malachite}</Text></Tab>
           <Tab title="Fluorite"><Text>{content.fluorite}</Text></Tab>
           <Tab title="Magnetite"><Text>{content.magnetite}</Text></Tab>
         </Tabs>
         {!(position && index === alignments.length - 1) && <CardDivider />}
       </Fragment>
     );
   });

   return (
     <DemoLayout>
       {tabs()}
       {tabs({ position: 'start' })}
     </DemoLayout>
   );
 }

Maximum Tab Width #

Use the maxTabWidth prop to constrain the width of each Tab. Note that if the Tab title is longer than the maximum width, it will be truncated but accessible via Tooltip. Also note that if maxWidth is passed to a Tab, it will take precedence.

Malachite is a copper carbonate hydroxide mineral, with the formula Cu2CO3(OH)2. This opaque, green banded mineral crystallizes in the monoclinic crystal system, and most often forms botryoidal, fibrous, or stalagmitic masses, in fractures and spaces, deep underground, where the water table and hydrothermal fluids provide the means for chemical precipitation.

<Tabs maxTabWidth="8em" label="Minerals" height="7.75em">
  <Tab title="Malachite Will Truncate">
    <Text>{content.malachite}</Text>
  </Tab>
  <Tab title="Fluorite">
    <Text>{content.fluorite}</Text>
  </Tab>
  <Tab title="Magnetite">
    <Text>{content.magnetite}</Text>
  </Tab>
</Tabs>

Overflow #

If the list of Tabs cannot fit in the space available, it will automatically be displayed in a scrollable area with next/previous arrow buttons to navigate.

Note that for vertically-oriented Tabs (those with a position of 'start' or 'end') to use this behavior, you must provide a height.

Malachite is a copper carbonate hydroxide mineral, with the formula Cu2CO3(OH)2. This opaque, green banded mineral crystallizes in the monoclinic crystal system, and most often forms botryoidal, fibrous, or stalagmitic masses, in fractures and spaces, deep underground, where the water table and hydrothermal fluids provide the means for chemical precipitation.

() => {
  const tabPanels = oneThruTwenty.map((number) => (
      <Tab title={title(number)} key={number}>
        <Text>{content(number)}</Text>
      </Tab>
    )
  );
  return (
    <DemoLayout>
      <Tabs label="Minerals" height="7.75em">{tabPanels}</Tabs>
      <CardDivider />
      <Tabs height="13em" position="start" label="Minerals">{tabPanels}</Tabs>
    </DemoLayout>
  )
}

Controlled #

Tabs controls its own state by default, and can optionally be managed by the application as a controlled component through the selectedTabIndex prop. A callback for onChange is also provided.

Malachite is a copper carbonate hydroxide mineral, with the formula Cu2CO3(OH)2. This opaque, green banded mineral crystallizes in the monoclinic crystal system, and most often forms botryoidal, fibrous, or stalagmitic masses, in fractures and spaces, deep underground, where the water table and hydrothermal fluids provide the means for chemical precipitation.

() => {
  class MyTabs extends Component {
    constructor(props) {
      super(props);

      this.state = {
        selectedTabIndex: 0
      };

      this.handleChange = this.handleChange.bind(this);
      this.resetDefaultSelected = this.resetDefaultSelected.bind(this);
    }

    handleChange(selectedTabIndex) {
      this.setState({
        selectedTabIndex
      });
    }

    resetDefaultSelected() {
      this.setState({
        selectedTabIndex: 0
      });
    }

    render() {
      return (
        <DemoLayout>
          <Button minimal size="small" onClick={this.resetDefaultSelected}>Reset to Default Selected</Button>
          <Tabs
            onChange={this.handleChange}
            selectedTabIndex={this.state.selectedTabIndex}
            label="Minerals"
            height="7.75em"
          >
            <Tab title="Malachite">
              <Text>{content.malachite}</Text>
            </Tab>
            <Tab title="Fluorite">
              <Text>{content.fluorite}</Text>
            </Tab>
            <Tab title="Magnetite">
              <Text>{content.magnetite}</Text>
            </Tab>
          </Tabs>
        </DemoLayout>
      );
    }
  }

  return <MyTabs />;
};

Bidirectionality #

Tabs supports right-to-left (RTL) languages. The position and alignment of Tabs and panel content are reversed when the direction theme variable is set to 'rtl'.

1 خدمة الجزر أبجد هوز شرب الحالي سمبر مصنوعة من السكر الغاز وكالات التصنيف الائتماني في تأثير تتعهد اللاعبين التمويل الدردشة عن العقارات الكلي الواجبات المنزلية الآن أن شرائح حزينة الكيميائية البيئية قبل التربة خوفا من زين، وعظيم الكرتون الرئيسي الشيخوخة محزن والمرض والجوع والتغذية سكان الفقر القبيح في الواقع، في قطر، في معرف بوروس، لا الاحماء منتصف الجلوس تلقي الكازينو أسد، والكثير من كرة القدم هذا العنصر هو أن البوابة الرئيسية ومع ذلك، فإن الموز التطوير العقاري قوس الصلصة

() => {
  const tabPanels = [
    <Tab title="علامة التبويب 1" key="1"><Text>{rtlContent(1)}</Text></Tab>,
    <Tab title="علامة التبويب 2" key="2"><Text>{rtlContent(2)}</Text></Tab>,
    <Tab title="علامة التبويب 3" key="3"><Text>{rtlContent(3)}</Text></Tab>
  ];
  return (
    <div dir="rtl">
      <ThemeProvider theme={{direction: 'rtl'}}>
        <DemoLayout>
          <Tabs label="علامات على القمة" height="7.75em">{tabPanels}</Tabs>
          <CardDivider />
          <Tabs position="start" label="علامات التبويب في البداية" height="7.75em">{tabPanels}</Tabs>
        </DemoLayout>
      </ThemeProvider>
    </div>
  );
}

Name	Type	Default	Description
align	'start' \| 'center' \| 'end' \| 'justify'	'start'	Horizontal or vertical alignment of Tabs in the tab list
children	React$Node		Content of Tabs; must be Tab components
defaultSelectedTabIndex	number		Index of the selected Tab; primarily for use with uncontrolled components
height	number \| string		Height of Tabs
id	string		Id of Tabs
label	string	required	Accessible label for Tabs
maxTabWidth	number \| string	'8.5em'	Maximum width of each Tab
onChange			Called when a Tab is selected
position	'bottom' \| 'end' \| 'start' \| 'top'	'top'	Position of the tab list in relation to the tab panel
selectedTabIndex	number		Index of the selected Tab; primarily for use with controlled components. If this prop is specified, an `onChange` handler must also be specified. See also: `defaultSelectedTabIndex`

Variable	Value
TabList_gutterHorizontal	theme.space_inline_md
TabList_gutterVertical	theme.space_stack_sm
TabListArrow_color	theme.color_gray_80
TabListArrow_color_hover	theme.color_theme
TabListOverflowContainer_boxShadowColor	theme.color_white
TabList_border	1px solid borderColor
TabPanel_gap	theme.space_inline_md

Examples #

Import Syntax #

Basic Usage #

Note

Tabs Position #

Accessibility Note

Tabs Alignment #

Maximum Tab Width #

Overflow #

Controlled #

Bidirectionality #

API & Theme #

Tabs Props #

Tabs Theme Variables #

Usage #

When/How to Use #

Best Practices #