Chip (チップ)

    Chip コンポーネントは、タグや連絡先 (メール受信者など) を楕円にコンパクト表示します。チップ は、Ignite UI for Angular Chip コンポーネントと視覚的には同じです。

    Chip のデモ

    Chip 密度

    Chip は 3 つの密度バリアントがサポートされます。

    • Comfortable - インタラクティブ シナリオに適しています。e.g. アクション トリガー
    • Cosy - 電子メール作成ツールの受信者フィールドなど短い領域に適しています。
    • Compact - グリッド セルの値などデータが密集したシナリオに最適です。

    Chip 状態

    ユーザーが Chip を操作すると、デフォルトの idle (アイドル状態) から focused (フォーカス状態) に、またはその逆に変化します。これには、Hi-Fi プロトタイプへシームレスにフローする動的なインタラクション デザインの作成が可能です。Sketch ではこれを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。

    idle

    focus

    Chip の選択

    Chip を選択すると、これを示す特別なチェック アイコンが左端に表示されます。🔣 Selection Icon オーバーライドは、この機能を Sketch でトリガーする手段を提供します。Chip に適用されるスマート レイアウト ルールはレイアウトを調整します。

    Adobe XD では、🔣 Selection Icon レイヤーを表示する必要があり、Chip の Stack も同様にレイアウトを調整します。Chip を選択したくない場合は、🔣 Selection Icon レイヤーを削除します。

    Chip の削除

    Chip を削除することが可能であると、これを示す特別なキャンセル アイコンが右端に表示されます。🔣 Remove Icon オーバーライドは、この機能を Sketch でトリガーする手段を提供します。Chip に適用されるスマート レイアウト ルールはレイアウトを調整します。

    Adobe XD では、🔣 Remove Icon レイヤーを表示する必要があり、Chip の Stack も同様にレイアウトを調整します。Chip を削除可能にしたくない場合は、🔣 Remove Icon レイヤーを削除します。

    idle and removable

    Chip コンテンツ

    Chip は、prefix および suffix コンテナーを介したコンテンツ テンプレートをサポートしており、Chip のメイン ラベルの前後にアイコンとテキストを挿入できます。

    Sketch では、Overrides/Input/Prefix/Container および Overrides/Input/Suffix/Container でプレフィックスおよびサフィックス コンテナーを追加するか、~No Symbol に設定して削除できます。

    Adobe XD では、目的のレイヤーを表示し、不要な要素を削除する必要があります。プレフィックスまたはサフィックスを一度に削除するには、削除します。最終的に、使用されている Stack によってレイアウトが調整されます。

    Text

    Prefix

    Prefix+Suffix

    Suffix

    Chip のスタイル設定

    Chip は、境界線と背景色のさまざまなオプション、およびテキストと Prefix、Suffix、選択、および適用可能な場合はアイコンの色の削除を通じて柔軟にスタイル設定できます。

    Chips Area (チップ領域)

    Chips Area コンポーネントを使用して Chips のコレクションを体系化します。Chips Area は Ignite UI for Angular で使用されるコンテナ領域と同一でヘルプの Ignite UI for Angular Chip コンポーネント トピックで説明します。

    Chips Area のデモ

    Chips Area のタイプ

    Chips 領域には、次の 2 つの異なるタイプがあります: Chip コレクションが関連していない Chip、および Chip が事前定義された順序で表示される接続した Chip。

    Chips Area のスタイル設定

    Chips Area は Chips の継承スタイルがサポートされますが、コネクター アイコンの色とグリフも変更できます。

    使用方法

    Chip を使用する場合、楕円はコンテンツに合わせて自動的にサイズを変更するため、それに応じてインスタンスのサイズを調整するだけで済みます。Chip を関連コンテンツのアクション トリガーとして使用する場合、アクションが 1 つのみまたは設定で選択オプションが 1 つのみの場合は使用しないでください。

    良い例 悪い例

    Chips Area を使用する場合は、上記の各 Chip コンポーネントの提案に従ってください。また、接続した Chips Area を使用する場合、各チップはアクションとして設定せずに、関連するエンティティ (人の順序付きリストなど) にする必要があります。

    良い例 悪い例

    その他のリソース

    関連トピック:

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