/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/tabs/BasicTabs.tsx
62 строки
2 KB
Matheus Eli
[docs][material-ui][Tabs] Improve the Basic Tabs demo (#42374)
28 май 2024, 08:40
Не верифицирован
28 май 2024, 08:40
74d6294
Код
Авторство
О чём код?
import * as React from 'react'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Box from '@mui/material/Box'; 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 a11yProps(index: number) { return { id: `simple-tab-${index}`, 'aria-controls': `simple-tabpanel-${index}`, }; } export default function BasicTabs() { const [value, setValue] = React.useState(0); const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); }; return ( <Box sx={{ width: '100%' }}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Tabs value={value} onChange={handleChange} aria-label="basic tabs example"> <Tab label="Item One" {...a11yProps(0)} /> <Tab label="Item Two" {...a11yProps(1)} /> <Tab label="Item Three" {...a11yProps(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> ); }