Web Components Chip (チップ) の概要

    Ignite UI for Web Components Chip は、ユーザーが情報を入力したり、選択したり、コンテンツをフィルタリングしたり、アクションをトリガーしたりするのに役立ちます。

    Web Components Chip の例

    使用方法

    まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

    npm install igniteui-webcomponents
    

    次に、以下のように、IgcChipComponent とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

    import { defineComponents, IgcChipComponent } from 'igniteui-webcomponents';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    defineComponents(IgcChipComponent);
    
    <igc-chip></igc-chip>
    

    選択可能な Chip を表示するには、Chip の selectable プロパティを使用できます。

    <igc-chip selectable></igc-chip>
    

    削除可能可能な Chip を表示するには、Chip の removable プロパティを使用できます。

    <igc-chip removable></igc-chip>
    

    コード例

    バリアント

    Ignite UI for Web Components Chip は、いくつかの事前定義されたスタイルのバリエーションをサポートします。サポートされている値の 1 つ (PrimaryInfoSuccessWarning、または Danger) を variant プロパティに割り当てることにより、バリアントを変更できます。

    <igc-chip variant="success"></igc-chip>
    

    無効

    Ignite UI for Web Components Chip は、disabled プロパティを使用して無効にできます。

    <igc-chip disabled></igc-chip>
    

    Prefix / Suffix (プレフィックス / サフィックス)

    IgcChipComponent コンポーネントの PrefixSuffix の部分とそれらのスロットを使用して、Chip のメイン コンテンツの前後に異なるコンテンツを追加できます。デフォルトの選択アイコンと削除アイコンが用意されていますが、Select スロットと Remove スロットを使用してカスタマイズできます。Start スロットと End スロットを使用して、メイン コンテンツの前後にコンテンツを追加できます。

    <igc-chip selectable removable>
      <span slot="select"><igc-icon name="verified-account"></igc-icon></span>
      <span slot="start"><igc-icon name="brush"></igc-icon></span>
        Chip
      <span slot="end"><igc-icon name="blood"></igc-icon></span>
      <span slot="remove"><igc-icon name="pacifier"></igc-icon></span>
    </igc-chip>
    

    Size (サイズ)

    size プロパティを使用して、ユーザーが IgcChipComponent のサイズを選択できるようにします。

    <igc-chip size="small" selectable removable>Chip</igc-chip>
    <igc-chip size="medium" selectable removable>Chip</igc-chip>
    <igc-chip size="large" selectable removable>Chip</igc-chip>
    

    スタイル設定

    Chip コンポーネントは、BasePrefixSufix 部分、およびすべてのスタイル プロパティを変更するために使用できるいくつかのスロットを公開します。

    igc-chip::part(base) {
        background: #011627;
        color: #ECAA53;
    }
    
    igc-chip::part(suffix) {
        color: #B7B6C2;
    }
    

    API リファレンス

    その他のリソース

    API メンバー