120 lines
3.0 KiB
JavaScript
120 lines
3.0 KiB
JavaScript
import { Box, Grid } from '@mui/material';
|
|
|
|
//components
|
|
import Widget from '../../../Widget';
|
|
import { Typography, Button } from '../../../Wrappers';
|
|
import Code from '../../../Code';
|
|
|
|
const Pages = () => {
|
|
return (
|
|
<>
|
|
<Grid container spacing={3}>
|
|
<Grid size={12}>
|
|
<Widget disableWidgetMenu>
|
|
<Typography
|
|
variant={'h4'}
|
|
style={{
|
|
marginBottom: 15,
|
|
marginTop: 10,
|
|
color: 'rgb(110, 110, 110)'
|
|
}}>
|
|
|
|
Buttons
|
|
</Typography>
|
|
<Typography style={{ marginBottom: 16 }}>
|
|
Button's variants:
|
|
</Typography>
|
|
<Button variant={'contained'} style={{ marginRight: 8 }}>
|
|
contained
|
|
</Button>
|
|
<Button variant={'outlined'} style={{ marginRight: 8 }}>
|
|
outlined
|
|
</Button>
|
|
<Button>text</Button>
|
|
<Typography style={{ marginBottom: 16, marginTop: 16 }}>
|
|
Code:
|
|
</Typography>
|
|
<Code row inline>
|
|
{`
|
|
<Button variant={"contained"}>contained</Button>
|
|
<Button variant={"outlined"}>outlined</Button>
|
|
<Button>text</Button>
|
|
`}
|
|
</Code>
|
|
<Typography style={{ marginBottom: 16 }}>
|
|
Button's colors:
|
|
</Typography>
|
|
<Box display={'flex'} flexWrap='wrap'>
|
|
<Box mt={1} mr={1}>
|
|
<Button variant='contained'>default</Button>
|
|
</Box>
|
|
<Box mt={1} mr={1}>
|
|
<Button color='primary' variant='contained'>
|
|
primary
|
|
</Button>
|
|
</Box>
|
|
<Box mt={1} mr={1}>
|
|
<Button color='secondary' variant='contained'>
|
|
secondary
|
|
</Button>
|
|
</Box>
|
|
<Box mt={1} mr={1}>
|
|
<Button color='warning' variant='contained'>
|
|
warning
|
|
</Button>
|
|
</Box>
|
|
<Box mt={1} mr={1}>
|
|
<Button color='success' variant='contained'>
|
|
success
|
|
</Button>
|
|
</Box>
|
|
<Box mt={1} mr={1}>
|
|
<Button variant='contained' color='info'>
|
|
info
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
<Typography style={{ marginBottom: 16, marginTop: 16 }}>
|
|
Code:
|
|
</Typography>
|
|
<Code row inline>
|
|
{`
|
|
<Button variant="contained">default</Button>
|
|
<Button
|
|
color="primary"
|
|
variant="contained"
|
|
>
|
|
primary
|
|
</Button>
|
|
<Button
|
|
color="secondary"
|
|
variant="contained"
|
|
>
|
|
secondary
|
|
</Button>
|
|
<Button
|
|
color="warning"
|
|
variant="contained"
|
|
>
|
|
warning
|
|
</Button>
|
|
<Button
|
|
color="success"
|
|
variant="contained"
|
|
>
|
|
success
|
|
</Button>
|
|
<Button variant="contained" color="info">
|
|
info
|
|
</Button>
|
|
`}
|
|
</Code>
|
|
</Widget>
|
|
</Grid>
|
|
</Grid>
|
|
</>);
|
|
|
|
};
|
|
|
|
export default Pages;
|