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);
Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。
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 つ (Primary、Info、Success、Warning、または Danger) を variant プロパティに割り当てることにより、バリアントを変更できます。
<igc-chip variant="success"></igc-chip>
無効
Ignite UI for Web Components Chip は、disabled プロパティを使用して無効にできます。
<igc-chip disabled></igc-chip>
Prefix / Suffix (プレフィックス / サフィックス)
IgcChipComponent コンポーネントの Prefix と Suffix の部分とそれらのスロットを使用して、Chip のメイン コンテンツの前後に異なるコンテンツを追加できます。デフォルトの選択アイコンと削除アイコンが用意されていますが、IgcSelectComponent スロットと 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 (サイズ)
ユーザーが --ig-size CSS 変数を利用して IgcChipComponent のサイズを選択できるようにします。
igc-chip {
--ig-size: var(--ig-size-large);
}
スタイル設定
Chip コンポーネントは、Base、Prefix、Sufix 部分、およびすべてのスタイル プロパティを変更するために使用できるいくつかのスロットを公開します。
igc-chip::part(base) {
background: #011627;
color: #ECAA53;
}
igc-chip::part(suffix) {
color: #B7B6C2;
}