Menu
Меню временно отображают список вариантов.
A menu displays a list of choices on a temporary surface. Оно появляется когда пользователь взаимодействует с кнопкой или другим элементом управления.
Basic menu
A basic menu opens over the anchor element by default (this option can be changed via props). When close to a screen edge, a basic menu vertically realigns to make sure that all menu items are completely visible.
Выбор варианта должен в идеале немедленно зафиксировать его и закрыть меню.
Неточности: В отличии от простых меню, простые диалоги могут содержать дополнительную информацию относительно опций, доступных для элемента списка или предоставлять навигационные или ортогональные действия, относящиеся к главной задаче. Although they can display the same content, simple menus are preferred over simple dialogs because simple menus are less disruptive to the user's current context.
Selected menu
If used for item selection, when opened, simple menus attempt to vertically align the currently selected menu item with the anchor element, and the initial focus will be placed on the selected menu item. The currently selected menu item is set using the selected property (from ListItem). To use a selected menu item without impacting the initial focus or the vertical positioning of the menu, set the variant property to menu.
Positioned menu
Because the Menu component uses the Popover component to position itself, you can use the same positioning props to position it. For instance, you can display the menu below the anchor:
MenuList composition
The Menu component uses the Popover component internally. However, you might want to use a different positioning strategy, or not blocking the scroll. For answering those needs, we expose a MenuList component that you can compose, with Popper in this example.
The primary responsibility of the MenuList component is to handle the focus.
Customized menu
Ниже находится пример кастомизации компонента. You can learn more about this in the overrides documentation page.
The MenuItem is a wrapper around ListItem with some additional styles. You can use the same list composition features with the MenuItem component:
🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.
Max height menu
Если высота меню препятствует отображению всех пунктов меню, меню можно прокручивать внутри.
Ограничения
Существует ошибка flexbox, которая предотвращает работу свойства text-overflow: ellipsis внутри flexbox. Вы можете использовать компонент Typography с noWrap, чтобы обойти эту проблему:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.
Дополнительные проекты
Для более сложных вариантов использования вы можете воспользоваться:
PopupState helper
Существует сторонний пакет material-ui-popup-state, который, в большинстве случаев, заботится о состоянии всплывающего меню за вас.
<PopupState variant="popover" popupId="demo-popup-menu">
{(popupState) => (
<React.Fragment>
<Button variant="contained" {...bindTrigger(popupState)}>
Dashboard
</Button>
<Menu {...bindMenu(popupState)}>
<MenuItem onClick={popupState.close}>Profile</MenuItem>
<MenuItem onClick={popupState.close}>My account</MenuItem>
<MenuItem onClick={popupState.close}>Logout</MenuItem>
</Menu>
</React.Fragment>
)}
</PopupState>