@tdcerhverv/tabs NPM

Tabs Component

Tabs make it easy to explore and switch between different views.

Example of usage

Import like this:

import { ThemeProvider } from '@material-ui/core';
import { themeTdcErhverv } from '@tdcerhverv/mui-theme';

...

import { Tabs } from '@tdcerhverv/tabs';
import { Tab } from '@tdcerhverv/tabs';

Use like this:

export default function Example() {
  const [value, setValue] = React.useState(2);

  const handleChange = (event: React.SyntheticEvent, newValue: unknown) => {
    setValue(newValue as number);
  };

  const loading = true;

  return (
    <ThemeProvider theme={themeTdcErhverv}>
      <Tabs
        value={value}
        onChange={handleChange}
        indicatorColor={loading ? 'secondary' : 'primary'}
      >
        <Tab label="Tab 1" />
        <Tab label="Tab 2" />
        <Tab label="Tab 3" />
        <Tab label="Tab 4 Disabled" disabled />
        <Tab label="Tab 5 Loading" disabled loading />
      </Tabs>
    </ThemeProvider>
  );
}

Props

Tabs

Spreads the default Tabs props. We override the default onChange to new v5 SyntheticEvent

interface TabsPropsFixed extends Omit<TabsProps, 'onChange'> {
  onChange: (event: React.SyntheticEvent, newValue: unknown) => void;
}

Tab

Spreads the default Tab props.

export interface StyledTabProps
  extends Omit<Partial<TabProps>, 'disableRipple' | 'textColor'> {
  loading?: boolean; // renders tab as skeleton
  badgeContent?: number; // append a badge to tab
}