Tabs | Mineral UI

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