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

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

ライブ デモ

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

構造

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

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

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

作業の開始

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

igniteui-angular パッケージを使用する Angular の場合は、パッケージをインストールします:

npm install igniteui-angular

次に、コンポーネントの imports コレクションに IgxBadgeComponent をインポートします。

import { IgxBadgeComponent } from 'igniteui-angular/badge';

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

<igx-badge></igx-badge>

使用方法

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

デモ サンプルがどのように作成されているかを見てみましょう。これは、アバターの上にシンプルな success バッジを表示する例です。これを実現するには、IgxAvatarModule を IgxBadgeModule とともにインポートします:

import { IgxBadgeModule } from 'igniteui-angular/badge';
import { IgxAvatarModule } from 'igniteui-angular/avatar';

両方のモジュールをコンポーネントの imports コレクションに追加するか、スタンドアロン コンポーネントをインポートします。次に、コンポーネントをテンプレートに追加します:

<div class="wrapper">
  <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
  <igx-badge icon="check" type="success"></igx-badge>
</div>

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

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

igx-badge {
  position: absolute;
  bottom: 0;
  left: 28px;
}

タイプ

バッジは、数字やアイコンなど、さまざまな種類のコンテンツを持つことができます。

[value] 入力を使用して、バッジ内にテキストや数値のカウントを表示します:

<igx-badge [value]="model.value"></igx-badge>

[icon] 入力を使用して、バッジ内にアイコンを表示します:

<igx-badge icon="check" type="success"></igx-badge>

[icon] と [value] の両方が設定されている場合、バッジは両方を同時に表示します:

<igx-badge icon="check" value="5" type="success"></igx-badge>

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

<igx-badge>
  <igx-icon>bluetooth</igx-icon>
  <span>Bluetooth</span>
</igx-badge>

アイコン

Material Icons に加えて、Angular Badge は Material Icons Extended やその他のカスタム アイコン セットをサポートします。IgxIconService でカスタム アイコンを登録し、その名前とアイコン セットを指定します:

this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');

<igx-badge icon="heart-monitor" iconSet="imx-icons"></igx-badge>

ドット

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

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

<igx-badge dot></igx-badge>

サイズ

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

igx-badge {
  --size: 12px;

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

形状

バッジの形状は、shape 属性を使用して rounded (デフォルト) または square に設定できます。

<igx-badge icon="check" type="success" shape="square"></igx-badge>

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

バリアント

Angular Badge は、Primary、Info、Success、Warn、Error の種類をサポートします。type 属性を設定して種類を選択します。

<igx-badge type="success"></igx-badge>

アウトライン

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

<igx-badge outlined></igx-badge>

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

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

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

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

プロパティ

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

Angular Badge は、次のプロパティを公開します。完全な型定義については、API リファレンスを参照してください。

スタイル設定

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

Sass テーマ

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

CSS 変数

スタイル パーツ

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

Tailwind によるスタイル設定

カスタムの Tailwind ユーティリティ クラスを使用してバッジをスタイル設定できます。事前に Tailwind をセットアップ してください。

グローバル スタイルシートで Tailwind をインポートするとともに、ユーティリティ ファイルをインクルードします:

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

ライトおよびダーク テーマ バリアントには light-badge と dark-badge を使用します。生成された CSS 変数は、任意のプロパティでオーバーライドできます:

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

感嘆符 (!) により、ユーティリティ クラスがコンポーネントのデフォルト テーマより優先されるようになります。

アクセシビリティ

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

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

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

スクリーン リーダー / ARIA

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

• コンポーネントは role="status" と aria-label="badge" で初期化されます。
• Angular はバッジの種類とそのアイコンまたは値から aria-roledescription を導出します。badge が意味のあるアクセシブル名でない場合は、label 入力を設定してください。
• テキストのないバッジや dot バッジのステータスが支援技術では他に得られない場合は、意味のある label を追加してください。

アクセシビリティ準拠

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

ユーザー側の責任:

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

トラブルシューティング

Badge をインタラクティブなコントロールとして扱ったり、ステータスの唯一の表示手段として扱ったりする前に、このセクションで制約と一般的な判断のポイントを確認してください。

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

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

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

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

既知の制限

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

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

API リファレンス

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

依存関係

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

その他のリソース

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

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

関連コンポーネント

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

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

FAQ