Blazor Chip (チップ) の概要

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

Blazor Chip の例

使用方法

IgbChip を使用する前に、次のように登録する必要があります:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));

また、追加の CSS ファイルをリンクして、スタイルを IgbChip コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

<div class="container sample vertical">
    <IgbChip>Chip</IgbChip>
</div>

@code {

    private IgbIcon RegisterIconRef { get; set; }

    protected override void OnInitialized()
    {
    }
}

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

<IgbChip Selectable="true"></IgbChip>

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

<IgbChip Removable="true"></IgbChip>

コード例

バリアント

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

<IgbChip Variant="ChipVariant.Success"></IgbChip>

無効

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

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

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

Size (サイズ)

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

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 リファレンス

IgbChip