/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/transitions/SimpleZoom.js
45 строк
1 KB
sai chand
[docs][Transition] Fix horizontal scroll in SimpleFade demo in mobile screens (#47169)
04 ноя 2025, 06:59
Не верифицирован
04 ноя 2025, 06:59
3896cb1
Код
Авторство
О чём код?
import * as React from 'react'; import Box from '@mui/material/Box'; import Switch from '@mui/material/Switch'; import Paper from '@mui/material/Paper'; import Zoom from '@mui/material/Zoom'; import FormControlLabel from '@mui/material/FormControlLabel'; const icon = ( <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}> <svg width="100" height="100"> <Box component="polygon" points="0,100 50,00, 100,100" sx={(theme) => ({ fill: theme.palette.common.white, stroke: theme.palette.divider, strokeWidth: 1, })} /> </svg> </Paper> ); export default function SimpleZoom() { const [checked, setChecked] = React.useState(false); const handleChange = () => { setChecked((prev) => !prev); }; return ( <Box sx={{ height: 180 }}> <FormControlLabel control={<Switch checked={checked} onChange={handleChange} />} label="Show" /> <Box sx={{ display: 'flex' }}> <Zoom in={checked}>{icon}</Zoom> <Zoom in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}> {icon} </Zoom> </Box> </Box> ); }