Badge (バッジ) コンポーネント

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

ライブ デモ

Blazor Badge のデモは、このコンポーネントが他のインターフェース要素の隣でコンパクトなステータスや通知をどのように伝えられるかを示します。

構造

Blazor Badge は、他のインターフェース要素を装飾するコンパクトなラベルまたはドット インジケーターを表示します。

このコンポーネントは、base CSS パーツ内にコンテンツをレンダリングします。テキストやその他のインライン コンテンツにはコンポーネントのデフォルト スロットを使用してください。dot が有効になっている場合、バッジはコンテンツのないインジケーターとしてレンダリングされます。

<igc-badge>
└── ::part(base)
  └── default slot content
</igc-badge>

作業の開始

Blazor Badge を使用するには、まず Ignite UI for Blazor の作業の開始 トピックに従って基本的なプロジェクトのセットアップを行い、その後、対象プラットフォーム用にコンポーネントを登録してください。

前提条件とバージョンの互換性

対象フレームワークでサポートされているバージョンの Ignite UI for Blazor パッケージを使用してください。フレームワーク パッケージ、Badge パッケージ、テーマ パッケージは同じリリース バージョンに揃えてください。以下の例では、各コード ブロックで使用されているフレームワークとパッケージを明記しているため、周囲のページ コンテキストなしで読んでもスニペットが自己完結的になっています。

IgniteUI.Blazor パッケージを使用する Blazor の場合は、次のように Badge モジュールを登録します:

// in Program.cs file

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

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

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

<IgbBadge />

使用方法

Blazor Badge を使用して、他のコンポーネントと並べて短いステータス、カテゴリ、カウント、または通知インジケーターを表示します。

次の例は、Avatar 上に表示される success バッジを示しています。プラットフォーム固有のパッケージから Badge と Avatar コンポーネントをインポートし、相対位置指定のラッパー内に Badge を配置します。

Program.cs で Avatar と Badge のモジュールを登録します:

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

コンポーネントを Razor マークアップに追加します:

<div class="wrapper">
  <IgbAvatar Icon="person" Shape="AvatarShape.Circle" Size="AvatarSize.Small" />
  <IgbBadge Icon="check" Variant="@StyleVariant.Success" />
</div>

相対位置指定のラッパーを使用して、バッジを Avatar の上に配置します:

.wrapper {
  position: relative;
  margin-top: 15px;
}

タイプ

Ignite UI for Blazor Badge は、数字やアイコンなど、さまざまな種類のコンテンツを持つことができます。

value プロパティを使用して、バッジ内にテキストや数値のカウントを表示します:

<IgbBadge Variant="@StyleVariant.Primary">12</IgbBadge>

コンテンツを子要素として直接指定することもできます。アイコンとテキストの両方を子要素として指定する場合は、正しいパディングを保つためにテキストをラップしてください。

<IgbBadge>
  <IgbIcon Name="bluetooth" />
  <span>Bluetooth</span>
</IgbBadge>

アイコン

バッジの子コンテンツとしてアイコンを追加します:

<IgbBadge Variant="@StyleVariant.Success">
  <IgbIcon Name="heart-monitor" />
</IgbBadge>

カスタム アイコンの場合は、プラットフォームのアイコン サービスにアイコンを登録し、バッジの子コンテンツとしてレンダリングします。

たとえば、バッジで使用する前に SVG アイコンを登録します:

@code {
  private IgbIcon icon;

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender && icon != null)
    {
      await icon.EnsureReady();
      await icon.RegisterIconFromTextAsync(
        "heart-monitor",
        "<svg viewBox=\"0 0 24 24\"><path d=\"M3 12h4l2-6 4 12 2-6h6\" /></svg>",
        "custom");
    }
  }
}

ドット

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

コンテンツのない最小限の通知インジケーターをレンダリングするには、dot 属性を設定します:

<IgbBadge Dot="true" />

サイズ

--size CSS 変数でバッジのサイズを制御します。16px より小さいテキスト バッジの場合は、フォント サイズと行の高さも調整してください:

igc-badge {
  --size: 12px;

  font-size: calc(var(--size) / 2);
  line-height: normal;
}

形状

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

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

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

バリアント

Ignite UI for Blazor Badge は、いくつかの事前定義されたスタイルのバリアント (Primary、Info、Success、Warn、Error) をサポートします。サポートされている値 primary、info、success、warning、danger のいずれかを variant 属性に割り当てます。

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

アウトライン

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

<IgbBadge Outlined="true" />

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

使用すべき場合と使用すべきでない場合

使用すべき場合: バッジを使用して、他のコンポーネントと並べて短いステータス、カテゴリ、カウント、または通知の状態を伝えます。インジケーターに表示テキストが不要な場合は dot を使用します。

使用すべきでない場合: アクションのための主要なコントロールとして、フォームの検証メッセージの代わりとして、またはバッジのコンテンツ、周囲のコンテキスト、アクセシブルなラベルからステータスを理解できない場合に、バッジを使用しないでください。

使用すべき	使用すべきでない

プロパティ

Blazor Badge は、コンテンツ、外観、インジケーターの動作を制御するためのプラットフォーム固有のプロパティを公開します。

Blazor Badge は、次のプロパティを公開します。

スタイル設定

Blazor Badge は、IgbBadge コンポーネントの base CSS パーツと、ドキュメント化されたスタイル設定変数を使用して外観をカスタマイズします。

Sass テーマ

Ignite UI for Blazor のテーマ システムを使用して、アプリケーションの他の部分と一貫性のあるスタイルでバッジをスタイル設定します。

CSS 変数

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

スタイル パーツ

Tailwind によるスタイル設定

igniteui-theming のカスタム Tailwind ユーティリティ クラスを使用してバッジをスタイル設定できます。事前に Tailwind をセットアップ し、その後グローバル スタイルシートで Ignite UI ユーティリティをインポートしてください:

@import "tailwindcss";
@import "igniteui-theming/tailwind/utilities/material.css";

<IgbBadge Class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]"></IgbBadge>

感嘆符 (!) により、Tailwind ユーティリティがバッジのデフォルトのテーマ スタイルより優先されます。

アクセシビリティ

Blazor Badge は、短いカウント、状態、または通知を伝える非インタラクティブなステータス表示です。

キーボード インタラクション

バッジはフォーカスを受け取らず、キーボード入力を処理せず、コンポーネントのインタラクション イベントを公開しません。

スクリーン リーダー / ARIA

バッジ ホストは role="status" を使用して、コンテンツをステータス情報として公開します。

• コンポーネントは aria-roledescription を設定して、バッジとその現在の variant を識別します。
• テキストのないバッジ (dot バッジを含む) が支援技術では他に得られないステータスを伝える場合は、aria-label を追加してください。
• バッジのコンテンツまたはアクセシブルなラベルは、装飾されるアイテムに固有のものにしてください。例えば、単に 3 ではなく 3 件の未読メッセージ のように記述してください。

アクセシビリティ準拠

インフラジスティックスは、アクセシビリティ準拠 トピックで、Section 508 および WCAG 2.1 ガイドライン領域における Ignite UI for Blazor のアクセシビリティ サポートを文書化しています。

ユーザー側の責任:

• バッジに意味のあるテキストがない場合、特に dot バッジの場合は、ステータスを説明するアクセシブルな名前を提供してください。
• バッジの色のみをステータスの表示手段として使用しないでください。テキスト、アイコン、または他のアクセシブルな手掛かりと組み合わせてください。
• テーマ スタイルをオーバーライドする際は、バッジの前景色と背景色のコントラストを十分に確保してください。

トラブルシューティング

Blazor Badge のトラブルシューティング ガイダンスは、一般的なスタイルおよびコンテンツの問題について、問題 → 原因 → 対処法の形式で構成されています。

カスタムの背景色を設定してもバッジが変わらないのはなぜですか?

選択した variant は --background-color CSS 変数よりも優先されます。カスタムの背景色を使用するには、独自の背景色を適用するバリアントを設定しないようにしてください。

ドット バッジにコンテンツが表示されないのはなぜですか?

dot プロパティはバッジを最小限のインジケーターとしてレンダリングし、コンテンツをサポートしません。テキストやその他のインライン コンテンツを表示する必要がある場合は、通常のバッジを使用してください。

既知の制限

Blazor Badge には、次のプラットフォームに依存しない制限があります。

• ドット バッジはインジケーターのみであり、テキストやアイコンを表示できません。
• バッジのスタイルおよびバリアント/種類の名前は、Angular とその他のサポートされているフレームワーク間で異なります。属性をフレームワーク間でそのままコピーせず、このページのプラットフォーム固有の例と API リンクを使用してください。
• バッジは視覚的なステータス インジケーターであり、単体でキーボード インタラクションを提供しません。

API リファレンス

Blazor Badge の API リファレンスには、対象プラットフォームの完全に検証された API サーフェスが記載されています。

依存関係

Blazor Badge は、視覚的なスタイルを適用するためにテーマ スタイルシートを必要とします。フレームワーク固有のセットアップについては、作業の開始 を参照してください。

その他のリソース

以下のリソースでは、Blazor Badge に関する追加のガイダンスとプロジェクトのサポートを提供します。

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

関連コンポーネント

Blazor Badge は、ステータス インジケーターが他の視覚的要素に属する場合、Avatar などの関連コンポーネントと組み合わせて使用されることが一般的です。

• Avatar - Avatar と Badge を組み合わせてステータス インジケーターを表示します。

FAQ

これらの FAQ は、Blazor Badge の一般的なコンテンツ、インジケーター、パッケージの選択について説明します。