Combo (コンボ)

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

    Combo のデモ

    Combo は 2 つのパーツに分かれます。現在の選択を含む入力と 1 つ以上の項目を選択するために表示するドロップダウン。

    Input タイプ

    Combo Input は線タイプ (エアリー スタイル)、境界線タイプ (単色背景でよりはっきりと表示)、より読みやすくするために鮮明な画像の上に配置する際に最適なボックス タイプから選択が可能です。

    line

    border

    box

    操作状態

    3 つの Combo Input タイプはそれぞれ、有効または無効の状態で挿入できます。

    Input バリアント

    Combo Input は、明暗バリアントで分かりやすく、背景に明暗のコントラストを付けてスタイル設定できます。

    状態

    ユーザーが Combo とインタラクティブに操作する際に入力はさまざまな選択状態を経由します。コンテンツの代わりにプレースホルダーがある idle (アイドル状態)、ドロップダウンが開いているときの focused (フォーカス状態)、ユーザーが選択を完了して次に進むときの filled (塗りつぶし状態)。柔軟性が向上したことにより、Hi-Fi プロトタイプへシームレスにフローする動的なインタラクション デザインの作成が可能です。

    idle

    focused

    filled

    経験豊富なデザイナーは、ユーザー入力を制限して無効な状態を防止するために、検証スタイルを使用します。Combo の検証スタイルには統一感のある標準 Input があり、success (成功)、warning (警告)、error (エラー) を表示する洗練されたデザインを提供します。

    Sketch では状態と検証状態を Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。

    Note

    Combo 入力はレイアウト オプションが 1 つしかありませんが、このオーバーライドは、標準 Input との一貫性を確保するために Sketch で保持されています。

    Combo に使用される Dropdown は、標準 Dropdown コンポーネント同様にデスクトップやモバイルに適切なサイズがサポートされます。

    Dropdown には、暗いバリエーションと明るいバリエーションが付属する Search Input、状態の選択、および標準の Input と同様のレイアウトのオプションが含まれています。

    Combo に使用される Dropdown は、ヘッダーと複数選択項目の 2 種類の項目をサポートします。ヘッダーを介して、項目をグループに体系化できます。Sketch で Dropdown はスマート レイアウトを使用しており、1 つ以上の項目が ~No Symbol に設定されている場合に応じて調整できます。Adobe XD では、不要なものを削除し、Stack を使用してレイアウトを調整します。

    Combo 内の Dropdown Item は、5 つの状態をサポートします: disabled、idle、focused、selected、selected&focused。

    スタイル設定

    Combo は入力とドロップダウン部分でスタイルの組み合わせに柔軟性があります。入力テキスト要素の色と下線のスタイルと色のオプションがあります。Dropdown の場合、背景色を変更するか、検索入力や背景色とテキスト色の項目など、Combo Dropdown の項目に関連するさまざまなオプションを使用できます。

    使用方法

    Combo を使用する際に入力とドロップダウンは同じ幅で左右の境界線が一致する必要があります。Combo がフォーカスされたときのドロップダウンの表示は、Combo が表示をトリガーしたあとに常にコンテンツの上に表示する必要があります。Combo は、コンテンツを展開パネルのようにはプッシュしません。

    良い例 悪い例

    その他のリソース

    関連トピック:

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