Web Components Chip (チップ) の概要

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

    Web Components Chip の例

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    使用方法

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

    npm install igniteui-webcomponents
cmd

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

    import { defineComponents, IgcChipComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcChipComponent);
ts

    Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

    IgcChipComponent の使用を開始する最も簡単な方法は次のとおりです:

    <igc-chip></igc-chip>
html

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

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

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

    <igc-chip removable></igc-chip>
html
    Ignite UI for Web Components | CTA Banner

    コード例

    バリアント

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    無効

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

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

    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>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Size (サイズ)

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

    igc-chip {
    --ig-size: var(--ig-size-large);
}
css

    EXAMPLE
    TS
    HTML
    ChipSize.css
    index.css
    Edit in:

    スタイル設定

    IgcChipComponent コンポーネントは、すべてのスタイル プロパティを変更するために使用できる base、prefix、suffix CSS パーツを公開します。

    igc-chip::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-chip::part(suffix) {
  color: var(--ig-gray-400);
}
css

    EXAMPLE
    TS
    HTML
    ChipStyle.css
    index.css
    Edit in:

    API リファレンス

    その他のリソース