Tab Group

Basic

import {
  TabHeader,
  TabList,
  TabListGroup,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

Uncontrolled

• By default, the group is closed. To have it open initially, use the defaultOpen prop:

import * as React from 'react';
import {
  TabPanel,
  TabPanels,
  Tabs,
  TabListItem,
  TabList,
  TabHeader,
  TabListGroup,
  Text
} from '@ocean-network-express/magenta-ui/react';

Controlled

• To manage the open state of the group, use the open and onOpenChange props:

import * as React from 'react';
import {
  TabPanel,
  TabPanels,
  Tabs,
  TabListItem,
  TabList,
  TabHeader,
  TabListGroup,
  Text
} from '@ocean-network-express/magenta-ui/react';

Colors

• TabGroup supports 6 colors: blue, green, orange, red, royal, and purple. The default color is blue.
• The active tab’s color matches the color of its group. For standalone tabs (not in a group), the active color defaults to primary.

import {
  TabHeader,
  TabList,
  TabListGroup,
  TabListGroupProps,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

Default value

• The TabGroup component allows you to set a default color for the entire group using the defaultColor prop.
• The defaultColor prop accepts a value of type ColorOption, which defines the available color options in the design system.

<TabListGroup defaultColor="orange">
  {/* Tab items */}
</TabListGroup>

Controlled value

• You can control the color of a group by using the color and onColorChange props.
• The color prop sets the current color, and onColorChange is called when the user selects a new color.

  const [color, setColor] = React.useState<ColorOption>('orange');

  return (
    <div style={{ width: '700px' }}>
      <Text size="lg" style={{ marginBottom: 16 }} >
        Current Color Of Group 1: {color}
      </Text>
      <Tabs defaultIndex={0} size="lg">
        <TabHeader>
          <TabList>
            <TabListGroup

Sizes

• TabGroup supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

import {
  TabHeader,
  TabList,
  TabListGroup,
  TabListGroupProps,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,
  Text,
  TextProps,
} from '@ocean-network-express/magenta-ui/react';

• With size responsive, the component will be responsive to the viewport.

import {
  TabHeader,
  TabList,
  TabListGroup,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

Accessibility

TabGroup component follows WAI-ARIA recommendations on accessibility.

Keyboard interactions