解剖学

ドロップダウンメニューの解剖学.

  • 1. ポップオーバー: ドロップダウンメニューがラップされているコンテナコンポーネント。
  • 2. 親ボタン: ドロップダウンメニューを含むポップオーバーの表示を切り替えるために使用されるアイコンまたはボタン。
  • 3. メニューアイテム: ドロップダウンメニュー内のリストアイテム。

デザインガイドライン

使用法

ドロップダウンメニューを使用するタイミング

ユーザーに次のことをさせたい場合は、ドロップダウンメニューを使用してください:

  • リストからアクションを選択するか、設定を変更する、かつ
  • 利用可能な選択肢を文脈に応じてのみ表示する。

常にすべての利用可能なオプションを表示する必要がある場合は、代わりにツールバーを使用することを検討してください。

ユーザーがアイコンと対話した後にアクションのリストを表示するためにドロップダウンメニューを使用します.

すること

ユーザーがアイコンと対話した後にアクションのリストを表示するためにドロップダウンメニューを使用します。

重要なアクションに対してドロップダウンメニューを使用しないでください。代わりにツールバーを使用します.

しないこと

よく使用されるアクションに対してドロップダウンメニューを使用しないでください。代わりにツールバーを使用します。

動作

一般的に、親ボタンにはドロップダウンメニューが表示されることを示すために、アイコンまたはテキストの右側に三角形のアイコンを持つべきです。親ボタンが省略記号や「もっと」ラベルを使用して直接的に追加のコンテンツがあることを示す稀な場合には、これを省略することができます。

親ボタンは、ドロップダウンメニューが表示されているかどうかに関係なく、同じ視覚スタイルを保持するべきです。

配置

ドロップダウンメニューは通常、親ボタンの真下、または親ボタンの下と左側に表示されるべきです。下に十分なスペースがない場合は、親ボタンの上に表示することができます。

開発ガイドライン

ドロップダウンメニューは、ボタンの展開可能なメニューをレンダリングするためのReactコンポーネントです。<select>要素と目的は似ていますが、値を保持しないという違いがあります。代わりに、各オプションはアクションボタンとして機能します。

使用法

一連のコントロールを持つドロップダウンメニューをレンダリングします: 

  1. import { DropdownMenu } from '@wordpress/components';
  2. import {
  3.    more,
  4.    arrowLeft,
  5.    arrowRight,
  6.    arrowUp,
  7.    arrowDown,
  8. } from '@wordpress/icons';
  10. const MyDropdownMenu = () => (
  11.    <DropdownMenu
  12.    icon={ more }
  13.    label="Select a direction"
  14.    controls={ [
  15.    {
  16.    title: 'Up',
  17.    icon: arrowUp,
  18.    onClick: () => console.log( 'up' ),
  19.    },
  20.    {
  21.    title: 'Right',
  22.    icon: arrowRight,
  23.    onClick: () => console.log( 'right' ),
  24.    },
  25.    {
  26.    title: 'Down',
  27.    icon: arrowDown,
  28.    onClick: () => console.log( 'down' ),
  29.    },
  30.    {
  31.    title: 'Left',
  32.    icon: arrowLeft,
  33.    onClick: () => console.log( 'left' ),
  34.    },
  35.    ] }
  36.    />
  37. );

または、ドロップダウンメニューで使用するのに有効な要素を返すchildren関数を指定します: MenuItem, MenuItemsChoice, または MenuGroup. 

  1. import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
  2. import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
  4. const MyDropdownMenu = () => (
  5.    <DropdownMenu icon={ more } label="Select a direction">
  6.    { ( { onClose } ) => (
  7.    <>
  8.    <MenuGroup>
  9.    <MenuItem icon={ arrowUp } onClick={ onClose }>
  10.    Move Up
  11.    </MenuItem>
  12.    <MenuItem icon={ arrowDown } onClick={ onClose }>
  13.    Move Down
  14.    </MenuItem>
  15.    </MenuGroup>
  16.    <MenuGroup>
  17.    <MenuItem icon={ trash } onClick={ onClose }>
  18.    Remove
  19.    </MenuItem>
  20.    </MenuGroup>
  21.    </>
  22.    ) }
  23.    </DropdownMenu>
  24. );

プロパティ

コンポーネントは次のプロパティを受け入れます:

icon: string | null

折りたたまれたメニューボタンに表示されるダッシュアイコンアイコンスラッグ。

  • 必須: いいえ
  • デフォルト: "menu"

詳細については: https://developer.wordpress.org/resource/dashicons/

label: string

フォーカスされた折りたたまれたメニューボタンにアクセシビリティテキストとして表示される人間が読めるラベル。

  • 必須: はい

controls: DropdownOption[] | DropdownOption[][]

展開されたメニューに表示されるオプションを説明するオブジェクトの配列またはネストされた配列。

各オブジェクトには、icon ダッシュアイコンスラッグ文字列、人間が読めるtitle文字列、isDisabledブールフラグ、およびオプションが選択されたときに呼び出されるonClick関数コールバックを含めるべきです。

有効なドロップダウンメニューは、controlsまたはchildrenプロパティ、またはその両方を指定する必要があります。

– 必須: いいえ

children: ( callbackProps: DropdownCallbackProps ) => ReactNode

関数レンダープロップで、ドロップダウンメニューで使用するのに有効な要素を返すべきです: MenuItem, MenuItemsChoice, または MenuGroup. 最初の引数は、DropdownのrenderContentに与えられたのと同じ値を含むプロパティオブジェクトです。

有効なドロップダウンメニューは、controlsまたはchildrenプロパティ、またはその両方を指定する必要があります。

  • 必須: いいえ

詳細については: https://developer.wordpress.org/resource/dashicons/

className: string

ドロップダウンメニューのトグル要素ラッパーに適用するクラス名。

  • 必須: いいえ

popoverProps: DropdownProps[ ‘popoverProps’ ]

  2. このオブジェクトを使用して、`````Popover`````コンポーネントで利用可能なプロパティを変更します。`````DropdownMenu`````コンポーネントで既に公開されていないもの、例えば、ポップオーバーが親ノードに対して開く方向を`````position`````プロパティで設定します。  
  4. - 必須: いいえ
  7. #### toggleProps: ToggleProps
  9. `````toggleProps`````オブジェクトのプロパティは、`````renderToggle`````の`````Dropdown`````コンポーネントの実装においてネストされた`````Button`````コンポーネントにプロパティとして渡されます。  
  11. このオブジェクトを使用して、`````Button`````コンポーネントで利用可能なプロパティを変更します。`````DropdownMenu`````コンポーネントで既に公開されていないもの、例えば、ホバー時に表示されるツールチップテキストを`````tooltip`````プロパティで設定します。  
  13. - 必須: いいえ
  16. #### menuProps: NavigableContainerProps
  18. `````menuProps`````オブジェクトのプロパティは、`````renderContent`````の`````Dropdown`````コンポーネントの実装においてネストされた`````NavigableMenu`````コンポーネントにプロパティとして渡されます。  
  20. このオブジェクトを使用して、`````NavigableMenu`````コンポーネントで利用可能なプロパティを変更します。`````DropdownMenu`````コンポーネントで既に公開されていないもの、例えば、`````orientation`````プロパティで設定されたメニューの方向。  
  22. - 必須: いいえ
  25. #### disableOpenOnArrowDown: boolean
  27. いくつかの文脈では、ドロップダウンメニューを開くために使用される矢印下キーを無効にする必要があるかもしれません—例えば、そのキーが別のアクションを実行するために使用される場合。  
  29. - 必須: いいえ 
  30. - デフォルト: `````false

defaultOpen: boolean

初期表示時のドロップダウンメニューのオープン状態。オープン状態を制御する必要がない場合に使用します。コンポーネントの最初のレンダリング時にopenプロパティが指定されている場合、それにより上書きされます。

  • 必須: いいえ

open: boolean

ドロップダウンメニューの制御されたオープン状態。onToggleと一緒に使用する必要があります。

  • 必須: いいえ

onToggle: ( willOpen: boolean ) => void

ドロップダウンの状態がオープンからクローズに、またその逆に変わるときに呼び出されるコールバック。

  • 必須: いいえ