/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/breadcrumbs/CondensedWithMenu.js
51 строка
1 KB
Sergio Rene Tapia-Fikes
[docs][material-ui][Breadcrumbs] Document CondensedWithMenu option for Material UI Breadcrumbs (#42973)
13 сен 2024, 13:19
Не верифицирован
13 сен 2024, 13:19
e727062
Код
Авторство
О чём код?
import * as React from 'react'; import Breadcrumbs from '@mui/material/Breadcrumbs'; import Link from '@mui/material/Link'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; import IconButton from '@mui/material/IconButton'; import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; export default function CondensedWithMenu() { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event) => { if (event) { setAnchorEl(event.currentTarget); } }; const handleClose = () => { setAnchorEl(null); }; return ( <React.Fragment> <Menu anchorEl={anchorEl} open={open} onClose={handleClose} aria-labelledby="with-menu-demo-breadcrumbs" > <MenuItem onClick={handleClose}>Breadcrumb 2</MenuItem> <MenuItem onClick={handleClose}>Breadcrumb 3</MenuItem> <MenuItem onClick={handleClose}>Breadcrumb 4</MenuItem> </Menu> <Breadcrumbs aria-label="breadcrumbs"> <Link color="primary" href="#condensed-with-menu"> Breadcrumb 1 </Link> <IconButton color="primary" size="small" onClick={handleClick}> <MoreHorizIcon /> </IconButton> <Link color="primary" href="#condensed-with-menu"> Breadcrumb 5 </Link> <Link color="primary" href="#condensed-with-menu"> Breadcrumb 6 </Link> </Breadcrumbs> </React.Fragment> ); }