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 />
バッジの周囲に微妙な境界線を表示するには、バッジの Outlined 属性を設定できます。
<IgbBadge Outlined="true" />
例
バリエーション
Ignite UI for Blazor バッジは、いくつかの事前定義されたスタイルのバリエーションをサポートします。サポートされている値 primary (デフォルト)、info、success、warning、または danger のいずれかを Variant 属性に割り当てることにより、バリエーションを変更できます。
<IgbBadge Variant="@BadgeVariant.Success" />
形状
バッジ コンポーネントは、rounded (デフォルト) 形状と square をサポートします。これらの値は、Shape 属性に割り当てることができます。
<IgbBadge Shape="@BadgeShape.Square" />
スタイル設定
IgbBadge コンポーネントは、すべてのスタイル プロパティを変更するために使用できる base CSS パーツを公開します。
igc-badge::part(base) {
background: var(--ig-primary-500);
color: var(--ig-primary-500-contrast);
border-radius: 2px;
}