MenuItemsChoice

デザインガイドライン

MenuItemsChoice は、近くの MenuItems からオプションのセットを区別できるように、独自の MenuGroup に収容されるべきです。

使用法

MenuItemsChoice は、ユーザーにオプションのセットを提示するために DropdownMenu で使用されます。 MenuItemsChoice のオプションの1つが選択されると、他のオプションは自動的に選択解除されます。

• 1. 有効な場合、選択肢の横にチェックマークアイコンが表示され、無効な場合は消えます。
• 2. MenuItemsChoice の項目に関連するキーボードショートカットがある場合、それはメニュータイトルの右側に表示され、メニュー項目の右側に揃えられるべきです。 選択された選択肢には、すでにアクティブであるため、目に見えるショートカットは表示されるべきではありません。

MenuItemsChoiceを使用するタイミング

MenuItemsChoice を使用するのは、ユーザーに次のことを望むときです：

• メニュー内の選択肢のセットから単一のオプションを選択する。
• 利用可能なすべてのオプションを表示する。

MenuItemsChoice は、個々の機能をオンまたはオフに切り替えるために使用されるべきではありません。そのためには、FeatureToggle の使用を検討してください。

デフォルト

MenuItemsChoice を使用する場合、デフォルトで1つのオプションが選択されるべきです（つまり、ウェブアプリケーションの場合、ページが読み込まれたとき）。

ユーザーコントロール

デフォルトでオプションを選択することは、ユーザーがセット内の1つを選択する必要があることを伝えます。

タスクの迅速化

MenuItemsChoice のセット内で1つの選択肢が最も望ましいまたは頻繁に選択される場合、デフォルトでそれを選択することは有益です。これにより、インタラクションコストが削減され、ユーザーの時間とクリックを節約できます。

提案の力

デフォルトで 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>
   );
};