Blazor Badge (バッジ) の概要

Ignite UI for Blazor Badge は、視覚的な通知が必要な場合に、アバター、ナビゲーション メニュー、またはアプリケーション内の他のコンポーネントと組み合わせて使用されるコンポーネントです。バッジは通常、情報、成功、警告、またはエラーを伝達するために事前定義されたスタイルでデザインされています。

Blazor Badge の例

使用方法

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

// in Program.cs file

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

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

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

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

<IgbBadge />

例

バリエーション

Ignite UI for Blazor バッジは、いくつかの事前定義されたスタイルのバリエーションをサポートします。サポートされている値 primary (デフォルト)、info、success、warning、または danger のいずれかを Variant 属性に割り当てることにより、バリエーションを変更できます。

<IgbBadge Variant="@StyleVariant.Success" />

バッジにカスタム背景色が --background-color CSS 変数で設定されていても、バリアントの色が常に優先され、バッジに適用されます。

形状

バッジ コンポーネントは、rounded (デフォルト) および square 形状をサポートします。これらの値は、Shape 属性に割り当てることができます。

<IgbBadge Shape="@BadgeShape.Square" />

バッジの形状が square の場合、--border-radius CSS 変数を使用してカスタムのボーダー半径を設定することでさらにカスタマイズできます。

アウトライン

バッジには、outlined 属性を設定すると、周囲に控えめなボーダーを表示することもできます。

<IgbBadge Outlined="true" />

アウトライン バッジのボーダーの色は、--border-color CSS 変数を使用してカスタマイズすることもできます。

Dot

Ignite UI for Blazor Badge コンポーネントは、dot 属性を設定することで、通知用の最小限のドット インジケーターとして表示することもできます。ドット バッジはコンテンツをサポートしませんが、アウトライン表示が可能で、利用可能なすべてのドット タイプ (例: primary、success、info など) を使用できます。

<IgbBadge Dot="true" />

スタイル設定

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

igc-badge::part(base) {
  --background-color: var(--ig-error-A100);
  --border-radius: 2px;
}

API リファレンス

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)