Tabs

Tabs organize related content into distinct sections and provide users with a navigational interface to switch between these sections.

Basic

Source Code

import {
  TrainFrontOutline,
  TruckFrontOutline,
  VesselFrontOutline,
} from '@ocean-network-express/magenta-ui/icons';
import {
  TabHeader,
  TabList,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,

Controlled

To control Tabs state, use selectedIndex and onChange props:

Source Code

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

function Demo() {

  const [selectedIndex, setSelectedIndex] = React.useState<number>(0);

  return (

    <Tabs selectedIndex={selectedIndex} onChange={setSelectedIndex}>
      <TabHeader>
        <TabList>

Uncontrolled

If you do not need to subscribe to Tabs state changes, use defaultValue:

Source Code

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

function Demo() {

  return (

    <Tabs defaultIndex={0}>
      <TabHeader>
        <TabList>
          <TabListItem>Tab 1</TabListItem>
          <TabListItem>Tab 2</TabListItem>

Disabled Tabs

To disable a tab, pass the disabled prop to the TabListItem component.

Source Code

import {
  TrainFrontOutline,
  TruckFrontOutline,
  VesselFrontOutline,
} from '@ocean-network-express/magenta-ui/icons';
import {
  TabHeader,
  TabList,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,

Sizes

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

Source Code

import {
  TrainFrontOutline,
  TruckFrontOutline,
  VesselFrontOutline,
} from '@ocean-network-express/magenta-ui/icons';
import {
  TabHeader,
  TabList,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,

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

Screen prefix	Screen width	Component size
`xs` → `xl`	`0px` → `1279px`	sm
`xl` → `3xl`	`1280px` → `1919px`	md
`3xl` → `∞`	`1920px` → `∞`	lg

Source Code

import {
  TrainFrontOutline,
  TruckFrontOutline,
  VesselFrontOutline,
} from '@ocean-network-express/magenta-ui/icons';
import {
  TabHeader,
  TabList,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,

Tabs Variants

Horizontal

Tabs supports 2 variant horizontal and vertical.
Default variant is horizontal.

Source Code

import {
  TrainFrontOutline,
  TruckFrontOutline,
  VesselFrontOutline,
} from '@ocean-network-express/magenta-ui/icons';
import {
  TabHeader,
  TabList,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,

Vertical

Pass the vertical prop to change the variant.

Source Code

import {
  TrainFrontOutline,
  TruckFrontOutline,
  VesselFrontOutline,
} from '@ocean-network-express/magenta-ui/icons';
import {
  TabHeader,
  TabList,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,

Scrollable

Tabs supports scrollable by pass the control prop.

Horizontal

Source Code

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

import { TabItems } from '../../utils/Tabs/helpers';

Vertical

Source Code

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

import { TabItems } from '../../utils/Tabs/helpers';

Deletable

TabListItem can have a close icon by passing the deletable prop to the Tab component.
The close icon will be displayed on the right side of the tab when TabListItem is hovered or selected.
Passing the onDelete prop to the Tab component to handle the close icon clicked event.

Total: 3

Source Code

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

Custom Delete Icon

You can customize the delete icon by passing the deleteIcon prop to the Tab component.

Total: 10

Source Code

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

Customize

Destroy Inactive Tabs

By default, the content of inactive TabPanel will be destroyed. Set destroyOnHidden={false} on Tabs to allow the content to remain rendered.

Tab panel 1

Tab panel 2

Tab panel 3

Source Code

import {
  TrainFrontOutline,
  TruckFrontOutline,
  VesselFrontOutline,
} from '@ocean-network-express/magenta-ui/icons';
import {
  TabHeader,
  TabList,
  TabListItem,
  TabPanel,
  TabPanels,
  Tabs,

Accessibility

Tabs component follows WAI-ARIA recommendations on accessibility.

Keyboard interactions

Key	Description	Condition
`ArrowRight`	Focuses and activates next tab that is not disabled	`vertical="false"`
`ArrowLeft`	Focuses and activates previous tab that is not disabled	`vertical="false"`
`ArrowDown`	Focuses and activates next tab that is not disabled	`vertical="true"`
`ArrowUp`	Focuses and activates previous tab that is not disabled	`vertical="true"`
`Home`	Focuses and activates first tab
`End`	Focuses and activates last tab

Was this page helpful?