云策 WordPress 开发者社区

块编辑器开发文档

MenuGroup

查看官方原文 ↗
💡 云策文档标注

概述

MenuGroup 是 WordPress 组件库中的一个组件，用于将多个相关的 MenuItem 组件包装成一个共同的菜单组，以增强菜单的组织性和可读性。

关键要点

  • MenuGroup 用于指示两个或多个 MenuItem 组件之间的关联性，通过分组提升菜单结构清晰度。
  • 当 MenuGroup 与其他菜单项相邻时，应使用分隔线（divider）来区分组内和组外内容，确保视觉层次分明。
  • MenuGroup 支持可选标签（label），用于描述组内内容，帮助用户快速理解菜单分组目的。
  • MenuGroup 通常与 DropDownMenu 结合使用，适用于构建下拉菜单等交互界面。
  • 相关组件包括 MenuItem（用于单个菜单项）和 MenuItemsChoice（用于在 MenuGroup 内提供切换选项），开发者可根据具体需求选择合适组件。

代码示例

import { MenuGroup, MenuItem } from '@wordpress/components';

const MyMenuGroup = () => (
    <MenuGroup label="Settings">
        <MenuItem>Setting 1</MenuItem>
        <MenuItem>Setting 2</MenuItem>
    </MenuGroup>
);
📄 原文内容

MenuGroup wraps a series of related MenuItem components into a common section.

MenuGroup Example

Design guidelines

Usage

A MenuGroup should be used to indicate that two or more individual MenuItems are related. When other menu items exist above or below a MenuGroup, the group should have a divider line between it and the adjacent item. A MenuGroup can optionally include a label to describe its contents.

MenuGroup diagram with label and dividers

  1. MenuGroup label
  2. MenuGroup dividers

Development guidelines

Usage

import { MenuGroup, MenuItem } from '@wordpress/components';

const MyMenuGroup = () => (
    <MenuGroup label="Settings">
        <MenuItem>Setting 1</MenuItem>
        <MenuItem>Setting 2</MenuItem>
    </MenuGroup>
);

Related Components

  • MenuGroups are intended to be used in a DropDownMenu.
  • To use a single button in a menu, use MenuItem.
  • To allow users to toggle between a set of menu options, use MenuItemsChoice inside of a MenuGroup.