@tdcerhverv/tabs
v2.2.2
Published
Tabs component
Downloads
5
Maintainers
Keywords
Readme
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
}