菜单

菜单在临时表面上显示选项列表。

菜单在临时表面上显示选项列表。当用户与按钮或其他控件交互时，菜单会显示出来。

简介

菜单是通过一组相关组件实现的

Menu: 菜单的容器/表面。
Menu Item: 用户从菜单中选择的选项。
Menu List (可选): Menu Item 的替代可组合容器 — 详情请参阅“使用 Menu List 进行组合”。

默认情况下，基础菜单在锚点元素上方打开（此选项可以通过 props 更改）。当靠近屏幕边缘时，基础菜单会垂直重新对齐，以确保所有菜单项都完全可见。

你应该配置组件，以便选择一个选项立即确认并关闭菜单，如下面的演示所示。

在桌面视口中，增加了内边距，为菜单提供更多空间。

对于包含长列表和长文本的菜单，你可以使用 dense 属性来减小内边距和文本大小。

如果用于项目选择，当打开时，简单菜单会将初始焦点放在选定的菜单项上。当前选定的菜单项是使用 selected 属性（来自 ListItem）设置的。要在不影响初始焦点的情况下使用选定的菜单项，请将 variant 属性设置为 "menu"。

因为 Menu 组件使用 Popover 组件来定位自身，所以你可以使用相同的定位 props来定位它。例如，你可以将菜单显示在锚点的上方

Menu 组件在内部使用 Popover 组件。但是你可能想要使用不同的定位策略，或者例如，更喜欢不阻止滚动。

MenuList 组件允许你为这些用例组合自己的菜单 — 它的主要目的是处理焦点。请参阅下面的演示，了解使用 Menu List 进行组合并将 Menu 的默认 Popover 替换为 Popper 组件的示例

Menu 内容可以与其他组件（如 Avatar）混合使用。

联系人

个人资料

自定义

这是一个自定义组件的示例。你可以在覆盖文档页面中了解更多信息。

MenuItem 是 ListItem 的包装器，带有一些额外的样式。你可以将相同的列表组合功能与 MenuItem 组件一起使用

🎨 如果你正在寻找灵感，可以查看 MUI Treasury 的自定义示例。

如果菜单的高度阻止了所有菜单项的显示，则菜单可以在内部滚动。

局限性

存在一个 flexbox 错误，该错误阻止 text-overflow: ellipsis 在 flexbox 布局中工作。你可以使用带有 noWrap 的 Typography 组件来解决此问题。

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.

使用 ListSubheader 组件显示类别。

补充项目

对于更高级的用例，你或许可以利用

npm downloads

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>

<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>

按 Enter 键开始编辑

无样式

使用 Base UI Menu 可以完全掌控组件的设计，无需覆盖 Material UI 或 Joy UI 样式。这个无样式版本的组件是进行重度自定义和减小包大小的理想选择。

API

请参阅下面的文档，以获得此处提及的组件的所有可用 props 和类的完整参考。

菜单

简介

基础菜单

图标菜单

紧凑菜单

选中菜单

定位菜单

使用 Menu List 进行组合

账户菜单

自定义

最大高度菜单

局限性

更改过渡效果

上下文菜单

分组菜单

补充项目

无样式

API