Mui Tabs
import :
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import : scss
import "@/assets/scss/components/tabs.scss";
component : https://mui.com/material-ui/react-tabs/component : default
Item One
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
function CustomTabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
</div>
);
}
function tabProps(index: number) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
const [value, setValue] = React.useState(0);
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
};
<Box sx={{ width: '100%' }}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
<Tab label="Item One" {...tabProps(0)} />
<Tab label="Item Two" {...tabProps(1)} />
<Tab label="Item Three" {...tabProps(2)} />
</Tabs>
</Box>
<CustomTabPanel value={value} index={0} >
Item One
</CustomTabPanel>
<CustomTabPanel value={value} index={1} >
Item Two
</CustomTabPanel>
<CustomTabPanel value={value} index={2} >
Item Three
</CustomTabPanel>
</Box>component : Scrollable tabs
const [valueScroll, setValueScroll] = React.useState(0);
const handleChangeScroll = (event: React.SyntheticEvent, newValueScroll: number) => {
setValueScroll(newValueScroll);
};
<Box sx={{ maxWidth: { xs: 320, sm: 480 }, bgcolor: 'background.paper' }}>
<Tabs
value={valueScroll}
onChange={handleChangeScroll}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
<Tab label="Item Four" />
<Tab label="Item Five" />
<Tab label="Item Six" />
<Tab label="Item Seven" />
</Tabs>
</Box>component : Vertical tabs
Item One
interface TabVerticalPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
function TabVerticalPanel(props: TabVerticalPanelProps) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`vertical-tabpanel-${index}`}
aria-labelledby={`vertical-tab-${index}`}
{...other}
>
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
</div>
);
}
function tabsVerticalProps(index: number) {
return {
id: `vertical-tab-${index}`,
'aria-controls': `vertical-tabpanel-${index}`,
};
}
const [valueVertical, setValueVertical] = React.useState(0);
const handleChangeVertical = (event: React.SyntheticEvent, newValueVertical: number) => {
setValueVertical(newValueVertical);
};
<Box sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 224 }}>
<Tabs
orientation="vertical"
variant="scrollable"
value={valueVertical}
onChange={handleChangeVertical}
aria-label="Vertical tabs example"
sx={{ borderRight: 1, borderColor: 'divider' }}
>
<Tab label="Item One" {...tabsVerticalProps(0)} />
<Tab label="Item Two" {...tabsVerticalProps(1)} />
<Tab label="Item Three" {...tabsVerticalProps(2)} />
<Tab label="Item Four" {...tabsVerticalProps(3)} />
<Tab label="Item Five" {...tabsVerticalProps(4)} />
<Tab label="Item Six" {...tabsVerticalProps(5)} />
<Tab label="Item Seven" {...tabsVerticalProps(6)} />
</Tabs>
<TabVerticalPanel value={valueVertical} index={0}>
Item One
</TabVerticalPanel>
<TabVerticalPanel value={valueVertical} index={1}>
Item Two
</TabVerticalPanel>
<TabVerticalPanel value={valueVertical} index={2}>
Item Three
</TabVerticalPanel>
<TabVerticalPanel value={valueVertical} index={3}>
Item Four
</TabVerticalPanel>
<TabVerticalPanel value={valueVertical} index={4}>
Item Five
</TabVerticalPanel> <TabVerticalPanel value={valueVertical} index={5}>
Item Six
</TabVerticalPanel>
<TabVerticalPanel value={valueVertical} index={6}>
Item Seven
</TabVerticalPanel>
</Box>