/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/snackbars/TransitionsSnackbar.js
51 строка
1 KB
Harry Whorlow
[material-ui][Snackbar] Add Slots and SlotProps (#45103)
31 янв 2025, 07:48
Не верифицирован
31 янв 2025, 07:48
4b74f87
Код
Авторство
О чём код?
import * as React from 'react'; import Button from '@mui/material/Button'; import Snackbar from '@mui/material/Snackbar'; import Fade from '@mui/material/Fade'; import Slide from '@mui/material/Slide'; import Grow from '@mui/material/Grow'; function SlideTransition(props) { return <Slide {...props} direction="up" />; } function GrowTransition(props) { return <Grow {...props} />; } export default function TransitionsSnackbar() { const [state, setState] = React.useState({ open: false, Transition: Fade, }); const handleClick = (Transition) => () => { setState({ open: true, Transition, }); }; const handleClose = () => { setState({ ...state, open: false, }); }; return ( <div> <Button onClick={handleClick(GrowTransition)}>Grow Transition</Button> <Button onClick={handleClick(Fade)}>Fade Transition</Button> <Button onClick={handleClick(SlideTransition)}>Slide Transition</Button> <Snackbar open={state.open} onClose={handleClose} slots={{ transition: state.Transition }} message="I love snacks" key={state.Transition.name} autoHideDuration={1200} /> </div> ); }