64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
|
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, { ModalDialogProps } from '@mui/joy/ModalDialog';
|
||
|
|
import DialogTitle from '@mui/joy/DialogTitle';
|
||
|
|
import DialogContent from '@mui/joy/DialogContent';
|
||
|
|
|
||
|
|
export default function VariantModalDialog() {
|
||
|
|
const [variant, setVariant] = React.useState<
|
||
|
|
ModalDialogProps['variant'] | undefined
|
||
|
|
>(undefined);
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
||
|
|
<Button
|
||
|
|
variant="plain"
|
||
|
|
color="neutral"
|
||
|
|
onClick={() => {
|
||
|
|
setVariant('plain');
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Plain
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="outlined"
|
||
|
|
color="neutral"
|
||
|
|
onClick={() => {
|
||
|
|
setVariant('outlined');
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Outlined
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="soft"
|
||
|
|
color="neutral"
|
||
|
|
onClick={() => {
|
||
|
|
setVariant('soft');
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Soft
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="solid"
|
||
|
|
color="neutral"
|
||
|
|
onClick={() => {
|
||
|
|
setVariant('solid');
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Solid
|
||
|
|
</Button>
|
||
|
|
</Stack>
|
||
|
|
<Modal open={!!variant} onClose={() => setVariant(undefined)}>
|
||
|
|
<ModalDialog variant={variant}>
|
||
|
|
<ModalClose />
|
||
|
|
<DialogTitle>Modal Dialog</DialogTitle>
|
||
|
|
<DialogContent>This is a `{variant}` modal dialog.</DialogContent>
|
||
|
|
</ModalDialog>
|
||
|
|
</Modal>
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
}
|