import * as React from 'react';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';
import Paper from '@mui/material/Paper';
import Slide from '@mui/material/Slide';
import Button from '@mui/material/Button';
import { Card, Grid, Typography } from '@mui/material';
import { red } from '@mui/material/colors';
const icon = (
<Box
sx={{
display: 'grid',
gridAutoFlow: 'row',
gridTemplateColumns: 'repeat(4, 1fr)',
// gridTemplateRows: 'repeat(2, 50px)',
gap: 0.02,
}}
>
<item> <Card sx={{ m: 1 }}>
<Box component="container" sx={{ width: '100%', height: '100%' }}>
<Typography sx={{color: 'ButtonShadow' ,width: '100%' }}> sliding menu </Typography>
</Box>
</Card> </item>
<item> <Card sx={{ m: 1 }}>
<Box component="container" sx={{ width: '100%', height: '100%' }}>
<Typography sx={{color: 'ButtonShadow' ,width: '100%' }}> sliding menu </Typography>
</Box>
</Card> </item>
<item> <Card sx={{ m: 1 }}>
<Box component="container" sx={{ width: '100%', height: '100%' }}>
<Typography sx={{color: 'ButtonShadow' ,width: '100%' }}> sliding menu </Typography>
</Box>
</Card> </item>
<item> <Card sx={{ m: 1 }}>
<Box component="container" sx={{ width: '100%', height: '100%' }}>
<Typography sx={{color: 'ButtonShadow' ,width: '100%' }}> sliding menu </Typography>
</Box>
</Card> </item>
</Box>
);
export default function SimpleSlide() {
const [checked, setChecked] = React.useState(false);
const handleChange = () => {
setChecked((prev) => !prev);
};
return (
<Box sx={{ height: 180 }}>
<Box sx={{ width: `calc(100px + 16px)` }}>
<Button
onClick={handleChange}
label="Show"
> click me </Button>
<Slide direction="right" in={checked} mountOnEnter unmountOnExit>
{icon}
</Slide>
</Box>
</Box>
);
}
awesome meterial based gid :P
Top comments (0)