Components

Tab

Tab is used within Tabs to define a tab title and panel content.

Examples #

Import Syntax #

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

Basic Usage #

Use Tab to add a tab title and panel content to Tabs.

Note

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

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 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>

Icons #

Tab can contain an Icon at the start of its title.

The Rolling Stones are an English rock band formed in London, England, in 1962. The first stable line-up consisted of Brian Jones (guitar, harmonica), Mick Jagger (lead vocals), Keith Richards (guitar, backing vocals), Bill Wyman (bass), Charlie Watts (drums), and Ian Stewart (piano). Stewart was removed from the official line-up in 1963 but continued as a touring member until his death in 1985. Brian Jones was the original leader of the group.

The Rolling Stones were at the forefront of the British Invasion of bands that became popular in the United States in 1964 and were identified with the youthful and rebellious counterculture of the 1960s. Rooted in blues and early rock and roll, the group began a short period of musical experimentation in the mid-1960s that peaked with the psychedelic album Their Satanic Majesties Request (1967). Subsequently, the group returned to its "bluesy" roots with Beggars Banquet (1968) which along with its follow-ups Let It Bleed (1969), Sticky Fingers(1971) and Exile on Main St. (1972) is generally considered the band's best work and is seen as their "Golden Age". During this period, they were first introduced on stage as "The Greatest Rock and Roll Band in the World". Musicologist Robert Palmer attributed the endurance of the Rolling Stones to their being "rooted in traditional verities, in rhythm-and-blues and soul music", while "more ephemeral pop fashions have come and gone".

<Tabs label='Rolling Stones' height="15.2em">
  <Tab icon={<IconInfoOutline />} title="Bio">{content.bio}</Tab>
  <Tab icon={<IconMusicNote />} title="Albums">{content.albums}</Tab>
  <Tab icon={<IconCameraAlt />} title="Photos">{content.photos}</Tab>
</Tabs>

Disabled Tab #

Use the disabled prop to indicate that a Tab is not available for interaction.

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 label="Minerals" height="7.75em">
  <Tab title="Malachite">
    <Text>{content.malachite}</Text>
  </Tab>
  <Tab title="Fluorite">
    <Text>{content.fluorite}</Text>
  </Tab>
  <Tab disabled title="Magnetite">
    <Text>{content.magnetite}</Text>
  </Tab>
  <Tab title="Malachite">
    <Text>{content.malachite}</Text>
  </Tab>
  <Tab disabled title="Fluorite">
    <Text>{content.fluorite}</Text>
  </Tab>
</Tabs>

Maximum Width #

Use the maxWidth prop to constrain the width of the 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 maxTabWidth is passed to Tabs, maxWidth on a Tab 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 label="Minerals" height="7.75em">
  <Tab title="Malachite">
    <Text>{content.malachite}</Text>
  </Tab>
  <Tab maxWidth="6em" title="Fluorite Will Truncate">
    <Text>{content.fluorite}</Text>
  </Tab>
  <Tab title="Magnetite">
    <Text>{content.magnetite}</Text>
  </Tab>
</Tabs>

API & Theme #

Tab Props #

The Tab component takes the following React props.

NameTypeDefaultDescription
childrenReact$Node

Content of the tab panel

disabledboolean

Disables Tab

iconReact$Element<*>

Icon placed before the title

idstring

Id of Tab

maxWidthnumber | string

Maximum width of Tab

titleReact$Noderequired

Tab title

Note

Unlike most other components, which apply undocumented properties to the root element, Tab applies undocumented properties, including as and css, to the a element within the li element.

Tab Theme Variables #

These variables can be used as hooks to override this component's style at either a local or global level. The theme referenced below is whatever theme is available from props to the instance of this component.

VariableValue
Tab_backgroundColor_selectedtheme.backgroundColor_theme_selected
Tab_borderColor_focustheme.borderColor_theme_focus
Tab_borderWidth_focus1px
Tab_colortheme.color_gray_80
Tab_color_selectedtheme.color_theme_70
Tab_color_selectedHovertheme.color_theme
TabIndicator_thickness2px