/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/menus/GroupedMenu.js
59 строк
2 KB
Jan Potoms
[docs] Use `React.useId()` for demo IDs (#48300)
19 апр 2026, 13:10
Не верифицирован
19 апр 2026, 13:10
107f22c
Код
Авторство
О чём код?
import * as React from 'react'; import Button from '@mui/material/Button'; import ListSubheader from '@mui/material/ListSubheader'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; import { styled } from '@mui/material/styles'; const StyledListHeader = styled(ListSubheader)({ backgroundImage: 'var(--Paper-overlay)', }); export default function GroupedMenu() { const id = React.useId(); const buttonId = `${id}-button`; const menuId = `${id}-menu`; const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; return ( <div> <Button id={buttonId} aria-controls={open ? menuId : undefined} aria-haspopup="true" aria-expanded={open} onClick={handleClick} > Dashboard </Button> <Menu id={menuId} anchorEl={anchorEl} open={open} onClose={handleClose} slotProps={{ list: { 'aria-labelledby': buttonId, sx: { py: 0, }, }, }} > <StyledListHeader>Category 1</StyledListHeader> <MenuItem onClick={handleClose}>Option 1</MenuItem> <MenuItem onClick={handleClose}>Option 2</MenuItem> <StyledListHeader>Category 2</StyledListHeader> <MenuItem onClick={handleClose}>Option 3</MenuItem> <MenuItem onClick={handleClose}>Option 4</MenuItem> </Menu> </div> ); }