Files
react-test/docs/data/joy/components/divider/DividerInModalDialog.tsx
how2ice 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
init project
2025-12-12 14:26:25 +09:00

37 lines
1.2 KiB
TypeScript

import Button from '@mui/joy/Button';
import CardOverflow from '@mui/joy/CardOverflow';
import ModalDialog from '@mui/joy/ModalDialog';
import DialogTitle from '@mui/joy/DialogTitle';
import DialogContent from '@mui/joy/DialogContent';
import DialogActions from '@mui/joy/DialogActions';
import Divider from '@mui/joy/Divider';
export default function DividerInModalDialog() {
return (
<ModalDialog
sx={{
// this custom styles is for demonstration purpose, you might not need them in your app
position: 'static',
transform: 'none',
maxWidth: 300,
}}
>
<DialogTitle>Modal Title</DialogTitle>
<Divider inset="none" />
<DialogContent>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry standard dummy text ever since the 1500s
</DialogContent>
<CardOverflow sx={{ bgcolor: 'background.level1' }}>
<Divider inset="context" />
<DialogActions
buttonFlex="none"
sx={{ pt: 1.5, justifyContent: 'flex-start' }}
>
<Button size="sm">Got it!</Button>
</DialogActions>
</CardOverflow>
</ModalDialog>
);
}