菜单

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

简介

Joy UI 提供了五个与菜单相关的组件

• 菜单按钮 - 一个打开菜单的按钮。它复用了 Button 的样式。
• 菜单 - 用于包裹菜单项的列表框弹出窗口，它复用了 List 的样式。
• 菜单项 - 一个菜单项，它复用了 ListItemButton 的样式。
• 菜单列表 - 一个独立的列表框，用于组合使用。它也复用了 List 的样式。
• Dropdown - 最外层的组件，将按钮与菜单连接起来。它只提供上下文，不渲染任何内容。

组件

在 安装 后，您可以使用以下基本元素开始构建此组件

import Menu from '@mui/joy/Menu';
import MenuButton from '@mui/joy/MenuButton';
import MenuItem from '@mui/joy/MenuItem';
import Dropdown from '@mui/joy/Dropdown';

export default function MyApp() {
  return (
    <Dropdown>
      <MenuButton>Actions</MenuButton>
      <Menu>
        <MenuItem>Add item</MenuItem>
      </Menu>
    </Dropdown>
  );
}

基本用法

将 Menu 和 Menu Button 都放在 Dropdown 组件内。这将它们连接在一起。Menu Button 将切换菜单的可见性，并充当 Menu 弹出窗口的锚点。

默认情况下，菜单的基本版本在锚点元素上方打开。您可以通过特定的定位 props来更改此设置。

当靠近屏幕边缘时，菜单会垂直重新对齐，以确保所有菜单项都完全可见。选择一个选项应立即执行，理想情况下，提交该选项并关闭菜单。

尺寸

菜单组件开箱即用地提供三种尺寸：sm、md（默认）和 lg。

当为 Menu 组件指定尺寸时，它内部的菜单项将继承该值。

已选

使用 selected prop 来指示 MenuItem 是否被选中。

菜单项使用与 ListItemButton 相同的样式。

图标按钮菜单

要使用 IconButton 组件作为菜单按钮，请将其传递给 MenuButton 组件的根 slot。

使用 slotProps 将 props 传递给 IconButton 组件。

定位菜单

Menu 基于 MUI Base 的 Popper 组件，它公开了一些 placement props。例如，这就是您如何在锚点按钮的底部末端显示菜单的方式。

分组菜单

控制打开状态

默认情况下，菜单的打开/关闭状态由 Dropdown 组件在内部管理。要从外部以编程方式控制它，请应用 Dropdown 的 open 和 onOpenChange props，如下所示

MenuList 组合

要完全控制 DOM 结构，请使用 MenuList 组件。您可以使用它来组合任何类似弹出窗口的组件。此组件的主要职责是处理焦点状态。

或显示没有弹出窗口的菜单

调试

要保持列表框打开以检查元素，请从 Chrome DevTool Rendering 选项卡启用 Emulate a focused page 选项。您也可以使用 命令菜单并搜索它 来访问此选项。

常见示例

应用菜单

此示例复制了一个包含其他应用程序链接的菜单。

菜单栏

此示例复制了 macOS 上的应用程序菜单栏。它支持鼠标和键盘在菜单项之间导航。

侧边导航图标

此示例在仪表盘应用程序中非常常见，侧边导航被缩小为图标，菜单通过悬停触发。

无样式

使用 Base UI Menu 完全拥有组件的设计，无需覆盖 Material UI 或 Joy UI 样式。此无样式版本的组件是重度定制的理想选择，并且捆绑包大小更小。

API

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

• <Menu />
• <MenuButton />
• <MenuItem />
• <MenuList />