Blazor Badge (バッジ) の概要

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

    Blazor Badge の例

    使用方法

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

    IgbBadgeModule.Register(IgniteUIBlazor);
    

    また、追加の 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 />
    

    バッジの周囲に微妙な境界線を表示するには、バッジの outlined 属性を設定できます。

    <IgbBadge Outlined="true" />
    

    バリアント

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

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

    形状

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

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

    スタイル設定

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

    igc-badge::part(base) {
      color: olive;
      background: beige;
      border-radius: 2px;
    }
    

    その他のリソース