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.
Name | Type | Default | Description |
---|---|---|---|
children | React$Node | Content of the tab panel | |
disabled | boolean | Disables Tab | |
icon | React$Element<*> | Icon placed before the title | |
id | string | Id of Tab | |
maxWidth | number | string | Maximum width of Tab | |
title | React$Node | required | Tab title |
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.
Variable | Value |
---|---|
Tab_backgroundColor_selected | theme.backgroundColor_theme_selected |
Tab_borderColor_focus | theme.borderColor_theme_focus |
Tab_borderWidth_focus | 1px |
Tab_color | theme.color_gray_80 |
Tab_color_selected | theme.color_theme_70 |
Tab_color_selectedHover | theme.color_theme |
TabIndicator_thickness | 2px |