React Chip (チップ) の概要

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

React Chip の例

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

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

import { IgrChipModule, IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrChipModule.register();

<IgrChip></IgrChip>

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

<IgrChip selectable="true"></IgrChip>

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

<IgrChip removable="true"></IgrChip>

コード例

バリアント

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

<IgrChip variant="success"></IgrChip>

無効

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

<IgrChip disabled="true"></IgrChip>

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

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

Size (サイズ)

ユーザーが --ig-size CSS 変数を利用して IgrChip のサイズを選択できるようにします。

<IgrChip size="small" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
<IgrChip size="medium" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
<IgrChip size="large" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>

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;
}

API リファレンス

IgrChip