Dropdown (ドロップダウン)

    Dropdown コンポーネントでは、ユーザーがスクロール可能なリストでユーザー インタラクションに応じて表示されるコレクションから項目を選択できます。一度に 1 つの項目のみ選択できます。複数の項目を選択する必要がある場合は、代わりに Combo を使用してください。Dropdown は、Ignite UI for Angular Dropdown コンポーネントと視覚的に同じです。

    表示密度

    Dropdown には 3 つの表示密度の選択肢があります: Comfortable、Cosy および Compact です。

    項目

    Dropdown は、項目ヘッダーと項目の 2 つのタイプをサポートします。ヘッダーでグループの他の項目を体系化できます。

    項目の状態

    ドロップダウン項目は、Idle、Disabled、Focused、Selected、Selected&Focused、Selected&Disabled の 6 つの異なる状態をサポートしています。Figma では、状態は State プロパティから変更できるさまざまなバリアントです。Sketch ではこれを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。

    項目レイアウト テンプレート

    Dropdown Item は柔軟なアイコンとラベルのテンプレートをサポートします。Figma でアイコンを表示するには、ドロップダウンで 1 つまたはすべての項目を選択し、Prefix Icon プロパティをオンにする必要があります。Sketch でアイコンを表示するには、オーバーライドを Icon/Medium に設定し、スマート レイアウト ルールが項目レイアウトを自動的に調整します。Adobe XD では、アイコン レイヤーを表示し、Stack に配置してレイアウトを自動的に調整することで同じことが可能ですが、コンテンツにアイコンのある項目が必要ない場合は、アイコン レイヤーを削除します。

    スタイル設定

    Dropdown には、背景色のスタイルの柔軟性に加えて、項目やヘッダーの背景色やテキストの色など、含まれる要素に関連するさまざまなオプションがあります。

    使用方法

    Dropdown 使用時は、表示をトリガーする項目に従ってコンテンツの最上部に表示する必要があります。ドロップダウンは、展開パネルのようにコンテンツをプッシュしません。

    良い例 悪い例

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。