DropdownMenuButton
構成
ドロップダウンの引き金となるボタン(アクションボタン)とドロップダウンをあわせて、「ドロップダウンメニューボタン」と呼びます。
ドロップダウンメニューボタンは、以下の要素で構成されています。
- アクションボタン
- ドロップダウン
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
"default""s"
引き金となるボタンの大きさ
onlyIconTrigger
falsetrue
引き金となるボタンをアイコンのみとするかどうか