56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import Paper from '@mui/material/Paper';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Grid from '@mui/material/GridLegacy';
|
||
|
|
|
||
|
|
export default function StressGridLegacy() {
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
width: 400,
|
||
|
|
display: 'flex',
|
||
|
|
bgcolor: 'secondary.main',
|
||
|
|
'& .MuiPaper-root': {
|
||
|
|
p: 2,
|
||
|
|
textAlign: 'center',
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Grid container spacing={3} direction="column">
|
||
|
|
<Grid container item spacing={1}>
|
||
|
|
<Grid item xs={3}>
|
||
|
|
<Paper>xs=3</Paper>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={9}>
|
||
|
|
<Paper>xs=9</Paper>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
<Grid container item spacing={1} direction="row-reverse">
|
||
|
|
<Grid item xs={3}>
|
||
|
|
<Paper>first</Paper>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={3}>
|
||
|
|
<Paper>last</Paper>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
<Grid container item spacing={1} justifyContent="space-between">
|
||
|
|
<Grid item xs={3}>
|
||
|
|
<Paper>space</Paper>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={3}>
|
||
|
|
<Paper>between</Paper>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
<Grid container item spacing={1} alignItems="stretch" direction="column-reverse">
|
||
|
|
<Grid item>
|
||
|
|
<Paper>reverse</Paper>
|
||
|
|
</Grid>
|
||
|
|
<Grid item>
|
||
|
|
<Paper>column</Paper>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|