/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/menus/LongMenu.js
73 строки
2 KB
Silviu Alexandru Avram
[docs] Update menu examples to always have aria-expanded (#48211)
10 апр 2026, 14:57
Не верифицирован
10 апр 2026, 14:57
829e381
Код
Авторство
О чём код?
import * as React from 'react'; import IconButton from '@mui/material/IconButton'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; import MoreVertIcon from '@mui/icons-material/MoreVert'; const options = [ 'None', 'Atria', 'Callisto', 'Dione', 'Ganymede', 'Hangouts Call', 'Luna', 'Oberon', 'Phobos', 'Pyxis', 'Sedna', 'Titania', 'Triton', 'Umbriel', ]; const ITEM_HEIGHT = 48; export default function LongMenu() { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; return ( <div> <IconButton aria-label="more" id="long-button" aria-controls={open ? 'long-menu' : undefined} aria-expanded={open} aria-haspopup="true" onClick={handleClick} > <MoreVertIcon /> </IconButton> <Menu id="long-menu" anchorEl={anchorEl} open={open} onClose={handleClose} slotProps={{ paper: { style: { maxHeight: ITEM_HEIGHT * 4.5, width: '20ch', }, }, list: { 'aria-labelledby': 'long-button', }, }} > {options.map((option) => ( <MenuItem key={option} selected={option === 'Pyxis'} onClick={handleClose}> {option} </MenuItem> ))} </Menu> </div> ); }