/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/modal/TransitionsModal.js
55 строк
1 KB
Olivier Tassinari
[docs] Fix modal transition demos (#36137)
18 фев 2023, 22:37
Не верифицирован
18 фев 2023, 22:37
16b9a7a
Код
Авторство
О чём код?
import * as React from 'react'; import Backdrop from '@mui/material/Backdrop'; import Box from '@mui/material/Box'; import Modal from '@mui/material/Modal'; import Fade from '@mui/material/Fade'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; const style = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 400, bgcolor: 'background.paper', border: '2px solid #000', boxShadow: 24, p: 4, }; export default function TransitionsModal() { const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <div> <Button onClick={handleOpen}>Open modal</Button> <Modal aria-labelledby="transition-modal-title" aria-describedby="transition-modal-description" open={open} onClose={handleClose} closeAfterTransition slots={{ backdrop: Backdrop }} slotProps={{ backdrop: { timeout: 500, }, }} > <Fade in={open}> <Box sx={style}> <Typography id="transition-modal-title" variant="h6" component="h2"> Text in a modal </Typography> <Typography id="transition-modal-description" sx={{ mt: 2 }}> Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </Typography> </Box> </Fade> </Modal> </div> ); }