005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
import Box from '@mui/joy/Box';
|
|
import Button from '@mui/joy/Button';
|
|
import Chip from '@mui/joy/Chip';
|
|
import Checkbox from '@mui/joy/Checkbox';
|
|
import Typography from '@mui/joy/Typography';
|
|
|
|
export default function GlobalVariantComponents() {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'grid',
|
|
gridTemplateColumns: {
|
|
xs: 'repeat(1, minmax(0, 1fr))',
|
|
sm: 'auto repeat(4, minmax(0, 1fr))',
|
|
},
|
|
gap: 3,
|
|
justifyItems: 'center',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Typography level="body-sm" sx={{ justifySelf: 'flex-end' }}>
|
|
Button:
|
|
</Typography>
|
|
<Button variant="solid" color="primary">
|
|
Solid
|
|
</Button>
|
|
<Button variant="soft" color="primary">
|
|
Soft
|
|
</Button>
|
|
<Button variant="outlined" color="primary">
|
|
Outlined
|
|
</Button>
|
|
<Button variant="plain" color="primary">
|
|
Plain
|
|
</Button>
|
|
<Typography level="body-sm" sx={{ justifySelf: 'flex-end' }}>
|
|
Chip:
|
|
</Typography>
|
|
<Chip variant="solid" size="sm" color="primary">
|
|
Solid
|
|
</Chip>
|
|
<Chip variant="soft" size="sm" color="primary">
|
|
Soft
|
|
</Chip>
|
|
<Chip variant="outlined" size="sm" color="primary">
|
|
Outlined
|
|
</Chip>
|
|
<Chip variant="plain" size="sm" color="primary">
|
|
Plain
|
|
</Chip>
|
|
<Typography level="body-sm" sx={{ justifySelf: 'flex-end' }}>
|
|
Checkbox:
|
|
</Typography>
|
|
<Checkbox variant="solid" defaultChecked label="Solid" />
|
|
<Checkbox variant="soft" defaultChecked label="Soft" />
|
|
<Checkbox variant="outlined" defaultChecked label="Outlined" />
|
|
<Checkbox variant="plain" defaultChecked label="Plain" />
|
|
</Box>
|
|
);
|
|
}
|