50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import Button from '@mui/joy/Button';
|
||
|
|
import Stack from '@mui/joy/Stack';
|
||
|
|
import Modal from '@mui/joy/Modal';
|
||
|
|
import ModalClose from '@mui/joy/ModalClose';
|
||
|
|
import ModalDialog from '@mui/joy/ModalDialog';
|
||
|
|
import DialogTitle from '@mui/joy/DialogTitle';
|
||
|
|
import DialogContent from '@mui/joy/DialogContent';
|
||
|
|
|
||
|
|
export default function SizeModalDialog() {
|
||
|
|
const [size, setSize] = React.useState(undefined);
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
||
|
|
<Button
|
||
|
|
variant="outlined"
|
||
|
|
color="neutral"
|
||
|
|
size="sm"
|
||
|
|
onClick={() => setSize('sm')}
|
||
|
|
>
|
||
|
|
Small
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="outlined"
|
||
|
|
color="neutral"
|
||
|
|
size="md"
|
||
|
|
onClick={() => setSize('md')}
|
||
|
|
>
|
||
|
|
Medium
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="outlined"
|
||
|
|
color="neutral"
|
||
|
|
size="lg"
|
||
|
|
onClick={() => setSize('lg')}
|
||
|
|
>
|
||
|
|
Large
|
||
|
|
</Button>
|
||
|
|
</Stack>
|
||
|
|
<Modal open={!!size} onClose={() => setSize(undefined)}>
|
||
|
|
<ModalDialog size={size}>
|
||
|
|
<ModalClose />
|
||
|
|
<DialogTitle>Modal Dialog</DialogTitle>
|
||
|
|
<DialogContent>This is a `{size}` modal dialog.</DialogContent>
|
||
|
|
</ModalDialog>
|
||
|
|
</Modal>
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
}
|