Tab.tsx (1999B)
1 import * as React from 'react'; 2 import Tabs from '@mui/material/Tabs'; 3 import Tab from '@mui/material/Tab'; 4 import Typography from '@mui/material/Typography'; 5 import Box from '@mui/material/Box'; 6 import TimeTable from './TimeTable'; 7 8 interface TabPanelProps { 9 children?: React.ReactNode; 10 index: number; 11 value: number; 12 } 13 14 function CustomTabPanel(props: TabPanelProps) { 15 const { children, value, index, ...other } = props; 16 17 return ( 18 <div 19 role="tabpanel" 20 hidden={value !== index} 21 id={`simple-tabpanel-${index}`} 22 aria-labelledby={`simple-tab-${index}`} 23 {...other} 24 > 25 {value === index && ( 26 <Box sx={{ p: 3 }}> 27 <Typography>{children}</Typography> 28 </Box> 29 )} 30 </div> 31 ); 32 } 33 34 function a11yProps(index: number) { 35 return { 36 id: `simple-tab-${index}`, 37 'aria-controls': `simple-tabpanel-${index}`, 38 }; 39 } 40 41 export default function CSV2iclTabs() { 42 const [value, setValue] = React.useState(0); 43 44 const handleChange = (event: React.SyntheticEvent, newValue: number) => { 45 setValue(newValue); 46 }; 47 48 return ( 49 <Box sx={{ width: '100%' }}> 50 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> 51 <Tabs value={value} onChange={handleChange} centered> 52 <Tab label="TimeTable" {...a11yProps(0)} /> 53 <Tab label="Import_CSV" {...a11yProps(1)} /> 54 <Tab label="Execute" {...a11yProps(2)} /> 55 <Tab label="Export" {...a11yProps(3)} /> 56 <Tab label="Help" {...a11yProps(4)}/> 57 </Tabs> 58 </Box> 59 <CustomTabPanel value={value} index={0}> 60 <TimeTable/> 61 </CustomTabPanel> 62 <CustomTabPanel value={value} index={1}> 63 %ImportCSV 64 </CustomTabPanel> 65 <CustomTabPanel value={value} index={2}> 66 %Execute 67 </CustomTabPanel> 68 <CustomTabPanel value={value} index={3}> 69 %Export 70 </CustomTabPanel> 71 <CustomTabPanel value={value} index={4}> 72 %Help 73 </CustomTabPanel> 74 </Box> 75 ); 76 }