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" />IgbChip の使用を開始する最も簡単な方法は次のとおりです:
<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);
}API リファレンス
IgbChip