開くデザインデータ開くデザインデータ(Figma)の作り方デザインデータ(Figma)の更新をライブラリに適用する手順デザインレビューリソースDropdownMenuButtonDropdownMenuButtonは複数の操作をまとめて提供するためのコンポーネントで、パネル内には操作がリスト形式で表示されます。操作の個数レイアウトの一貫性やユーザーの利便性に応じて適切な個数を設定してください。ひと目で把握できるようにできるだけ少ない個数が望ましいです。以下の場合には操作が1つの場合でも、あえてドロップダウンパネルの中に配置することがあります。使用頻度が高い順を推奨しますが、破壊的なアクション(例:オブジェクトの削除)に関しては、順序を下げて配置してください。操作の順序の典型的な例は以下のとおりです。削除レイアウトドロップダウンの引き金となるボタン(トリガー)とドロップダウンパネルをあわせて、「ドロップダウンメニューボタン」と呼びます。ドロップダウンメニューボタンは、以下の要素で構成されています。アイコン(FaCaretDownIcon)を使っています。ドロップダウンパネル操作をリスト形式でまとめて表示します。まとめ方は、デザインパターンから用途にあったものを選択してください。デザインパターン用途によって5つのパターンを定義します。オブジェクトに関する複数の操作をまとめるときに使います。特定のオブジェクトの操作であることがレイアウト上自明なとき(例えば「よくあるテーブル」の行の中など)に使います。同じ種類の操作をまとめるときに使います。A、B、Cのパターンに該当しないときに、異なる複数の操作をまとめるために使います。ボタンを配置するスペースを十分確保できないときの最終手段として検討できますが、基本的に利用を推奨しません。単一のオブジェクトに対する操作オブジェクトに関する操作をまとめるときに使います。ラベルは{オブジェクト名}の操作とします。オブジェクトに対して行なう操作を入れます。単一のオブジェクトに対する操作(オブジェクト名省略)操作の対象になるオブジェクトがレイアウト上、明らかなときに使います。単一のオブジェクトに対する操作」のようにオブジェクト名を表示しますが、狭い場所にレイアウトするときにオブジェクト名を省けます。ラベルは操作にします。オブジェクトに対して行なう操作を入れます。トリガーのラベルと同様にオブジェクト名を省けます。同じ種類の操作をまとめるときに使います。操作をまとめるラベルにします。同じ種類の操作を入れます。異なる複数の操作A、B、Cのパターンに該当しないときに、異なる複数の操作をまとめるために使います。ラベルはその他の操作とします。異なる複数の操作を入れます。ラベル省略(非推奨)ボタンを配置するスペースを十分確保できないときの最終手段として検討できますが、基本的に利用を推奨しません。アイコン(FaEllipsisHIcon)を使います。ラベルは視覚的に省いていますが、必ずlabel属性は設定して何のボタンなのかを伝えます。無効(disabled)トリガーの無効DropdownMenuButton自体を無効にすると、ドロップダウンパネルも操作できません。ドロップダウンパネルの操作の無効ドロップダウンパネル内の操作を無効にする場合、ButtonのdisabledDetailを使って無効状態の理由を表示します。