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 のサイズを選択できるようにします。

.size-small {
  --ig-size: var(--ig-size-small);
}

.size-medium {
  --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}

スタイル設定

IgbChip コンポーネントは、すべてのスタイルプロパティを変更するために使用できる 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);
}