DropdownMenuButton

DropdownMenuButton は複数の操作をまとめて提供するためのコンポーネントで、パネル内には操作がリスト形式で表示されます。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

構成

ドロップダウンの引き金となるボタン(アクションボタン)とドロップダウンをあわせて、「ドロップダウンメニューボタン」と呼びます。

ドロップダウンメニューボタンは、以下の要素で構成されています。

  1. アクションボタン
  2. ドロップダウン

ドロップダウンメニューボタンの構成図

1. アクションボタン

複数の操作がまとまっていることを示唆するために、Secondaryボタンアイコン付き(右)を使い、アイコンには「展開FaCaretDownIcon)」を使います。

2. ドロップダウン

Dropdownを用いて、操作をリスト形式でまとめて表示します。
まとめ方は、種類から用途にあったものを選択してください。

操作の個数

レイアウトの一貫性やユーザーの利便性に応じて適切な個数を設定してください。ひと目で把握できるようにできるだけ少ない個数が望ましいです。

ただし以下の場合には操作が1つの場合でも、あえてドロップダウンの中に配置することがあります。

  • 操作の優先度に依る視覚的優先度を付けたいとき
    例: 操作はオブジェクトの削除しかないが、積極的にオブジェクトの削除をさせたくない場合
  • 類似する画面とのレイアウトの一貫性を保ちたいとき

操作の順序

使用頻度が高い順を推奨しますが、破壊的なアクション(例:オブジェクトの削除)に関しては、順序を下げて配置してください。
操作の順序の典型的な例は以下のとおりです。

開かれた操作ドロップダウン。編集・複製・削除の順に操作が並んでいる。

種類

用途によって5つのパターンを定義します。

#パターン名用途
A単一のオブジェクトに対する操作オブジェクトに関する複数の操作をまとめるときに使います。
B単一のオブジェクトに対する操作(オブジェクト名省略)特定のオブジェクトの操作であることがレイアウト上自明なとき(例えばよくあるテーブルの行の中など)に使います。
C同一の操作同じ種類の操作をまとめるときに使います。
D異なる複数の操作異なる複数の操作を適切に分割できなかったり、まとめ方が無いときに、異なる複数の操作をまとめるために使います。
E異なる複数の操作(ラベル省略)Dのパターンに該当し、ボタンを配置するスペースを十分確保できないときに使います。

A. 単一のオブジェクトに対する操作

{オブジェクト名}の操作ボタン

オブジェクトに関する操作をまとめるときに使います。

要素説明
アクションボタンラベルは{オブジェクト名}の操作とします。
ドロップダウンオブジェクトに対して行なう操作を入れます。

B. 単一のオブジェクトに対する操作(オブジェクト名省略)

操作ボタン

操作の対象になるオブジェクトがレイアウト上、明らかなときに使います。
例: よくあるテーブルの行の中など

要素説明
アクションボタン基本的に「A. 単一のオブジェクトに対する操作」のようにオブジェクト名を表示しますが、狭い場所にレイアウトするときにオブジェクト名を省けます。ラベルは操作にします。
ドロップダウンオブジェクトに対して行なう操作を入れます。アクションボタンのラベルと同様にオブジェクト名を省けます。

C. 同一の操作

同じ種類の操作ボタン

同じ種類の操作をまとめるときに使います。

要素説明
アクションボタン操作をまとめるラベルにします。
ドロップダウン同じ種類の操作を入れます。

D. 異なる複数の操作

その他のボタン

他のA~Cのパターンに該当しないときに、異なる複数の操作をまとめるために使います。

要素説明
アクションボタンラベルはその他の操作とします。
ドロップダウン異なる複数の操作を入れます。

E. 異なる複数の操作(ラベル省略)

ラベル省略ボタン

「D. 異なる複数の操作」に該当し、ボタンを配置するスペースを十分確保できないときに使います。

要素説明
アクションボタンSecondaryボタンアイコンのみで、アイコンには「その他の操作FaEllipsisHIcon)」を使います。ラベルは視覚的に省けますが、必ず代替テキストを含めて何のボタンなのかを伝えましょう。
ドロップダウン「D. 異なる複数の操作」と同じです。

レイアウト

ドロップダウンメニューボタンのレイアウトは次のとおりです。

Props

label必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

引き金となるボタンラベル

children必須
falsetrue""0ReactElement<BaseProps & ElementProps & RefAttributes<HTMLButtonElement>, string | JSXElementConstructor<any>>ReactElement<BaseProps & ElementProps & RefAttributes<HTMLAnchorElement>, string | JSXElementConstructor<any>>ReactElement<Pick<BaseProps & ElementProps & RefAttributes<HTMLButtonElement>, "variant"> & { targetId: string; onClick?: (open: () => void) => void; children: Omit<...>; }, string | JSXElementConstructor<...>>ActionItem[]

操作群

triggerSize
"s""default"

引き金となるボタンの大きさ

onlyIconTrigger
falsetrue

引き金となるボタンをアイコンのみとするかどうか

ref
(instance: HTMLButtonElement) => voidRefObject<HTMLButtonElement>