Tab | Mineral UI

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>