跳转到内容
编辑此页面

Menu 菜单

菜单在临时出现的位置上显示了一系列的选项。

菜单在临时的表面上显示选择列表。 当用户和一个按钮、或者其他控制元件交互的时候，菜单会出现。

基础菜单

默认情况下，基础菜单会在描点元素上打开（这种方式可以使用属性来 改变）。 当靠近屏幕边缘时，简单菜单会在垂直方向上重新对齐，以确保所有菜单子项（menu items）都完全可见。

理想状态下，选择一个选项是会立刻执行此选项并且关闭整个菜单。

解疑：与简单菜单不同，一个简单的对话框可以提供与列表项可用选项相关的额外细节，或提供与主要任务相关的导航或正交操作。 虽然它们可以显示相同的内容，但和基本对话框相比，我们更倾向于简单菜单，因为它对用户的当前上下文干预更少。

<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
  Open Menu
</Button>
<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
>
  <MenuItem onClick={handleClose}>Profile</MenuItem>
  <MenuItem onClick={handleClose}>My account</MenuItem>
  <MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>

选择菜单

若用于选项的选择，当打开简单菜单的时候，它会通过一个锚元素来尝试与当前被选择的菜单的选择项垂直对齐，而初始的焦点集中于被选中的那个选项。 通过 selected 属性（在ListItem中），您能够设置当前被选中的选项。 若想要使用一个已被选的项目，且不影响初始的焦点或者菜单的垂直位置，您可以设置一下”菜单“的 variant 属性。

菜单定位

因为 Menu 组件是基于 Popover 组件来进行定位的，所以你也可以使用与之相同的 定位属性 来对它的位置进行改变。 例如，你可以在描点的下方显示菜单：

MenuList 组合

在菜单组件的内部，其实使用了 Popover 组件。 但是，您可能想要使用不同的元素定位的方式，或者您不想禁止页面的滚动。 为了满足这些需求，我们公开了一个 MenuList 组件，您可以像下面例子中这样结合 Popper 来编写自己的菜单组件。

MenuList 组件的主要任务是处理焦点。

自定义菜单

以下是自定义组件的一个示例。 您可以在重写文档页中了解有关此内容的更多信息。

MenuItem 的原理是用额外的样式包装了 ListItem 组件。 你可以将同样的列表合成功能来装饰 MenuItem 组件：

🎨 如果您还在寻找灵感，您可以看看 MUI Treasury 特别定制的一些例子。

最大高度的菜单

如果最大高度的菜单仍无法显示所有菜单项，则菜单可以在内部滚动。

设计局限

有 一个 flexbox 的错误，在 flexbox 的布局中，无法正常使用 text-overflow: ellipsis。 您可以使用 Typography 组件和 noWrap 来解决此问题：

更改过渡动画

使用不同的过渡动画。

<Button aria-controls="fade-menu" aria-haspopup="true" onClick={handleClick}>
  Open with fade transition
</Button>
<Menu
  id="fade-menu"
  anchorEl={anchorEl}
  keepMounted
  open={open}
  onClose={handleClose}
  TransitionComponent={Fade}
>
  <MenuItem onClick={handleClose}>Profile</MenuItem>
  <MenuItem onClick={handleClose}>My account</MenuItem>
  <MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>

快捷菜单 Context menu

这是一个快捷菜单的示例。 （单击右键就可以打开。）

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)}>
        Open Menu
      </Button>
      <Menu {...bindMenu(popupState)}>
        <MenuItem onClick={popupState.close}>Cake</MenuItem>
        <MenuItem onClick={popupState.close}>Death</MenuItem>
      </Menu>
    </React.Fragment>
  )}
</PopupState>

API