菜单项选择

MenuItemsChoice 的功能类似于 MenuItem 集合，但允许用户从多个选项中选择一个。

设计指南

MenuItemsChoice 应置于其独立的 MenuGroup 中，以确保该选项集与附近的 MenuItem 区分开来。

用法

MenuItemsChoice 用于 DropdownMenu 中，向用户提供一组选项。当选中 MenuItemsChoice 中的某个选项时，其他选项会自动取消选中。

1. 当选项处于启用状态时，其旁边会出现勾选标记图标；禁用时则消失。
2. 如果 MenuItemsChoice 中的某项关联了键盘快捷键，应在菜单标题右侧显示该快捷键，并与菜单项右对齐。已选中的选项不应显示可见的快捷键，因为它们已经是激活状态。

何时使用 MenuItemsChoice

当您希望用户执行以下操作时使用 MenuItemsChoice：

• 在菜单的一组选项中选择一个单一选项。
• 展示所有可用选项。

MenuItemsChoice 不应用于单独开启或关闭功能。对于此类需求，建议使用 FeatureToggle。

默认值

使用 MenuItemsChoice 时，必须默认选中其中一个选项（例如，在网页应用加载页面时）。

用户控制

默认选中某个选项表明用户必须在集合中进行选择。

加速任务

当 MenuItemsChoice 中的一组选项里有一个最理想或被频繁选择的选项时，将其设为默认选中会有所帮助。这样做可以降低交互成本，为用户节省时间和点击次数。

建议的力量

默认选中 MenuItemsChoice 中的某个选项会对用户产生强烈的暗示作用。这有助于他们做出最佳决策并增强信心。（请谨慎使用此指导原则，且仅用于良好目的。）

开发指南

用法

import { useState } from 'react';
import { MenuGroup, MenuItemsChoice } from '@wordpress/components';

const MyMenuItemsChoice = () => {
    const [ mode, setMode ] = useState( 'visual' );
    const choices = [
        {
            value: 'visual',
            label: 'Visual editor',
        },
        {
            value: 'text',
            label: 'Code editor',
        },
    ];

    return (
        <MenuGroup label="Editor">
            <MenuItemsChoice
                choices={ choices }
                value={ mode }
                onSelect={ ( newMode ) => setMode( newMode ) }
            />
        </MenuGroup>
    );
};