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 の作業の開始 トピックに従って基本的なプロジェクトのセットアップを行い、その後、対象プラットフォーム用にコンポーネントを登録してください。

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

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

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

npm install igniteui-angular

次に、Badge コンポーネントをインポートします:

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

コンポーネントの imports コレクションに IgxBadgeComponent を追加し、テンプレートで igx-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

バッジが支援技術では他に得られない情報を伝える場合は、周囲のコンポーネントに意味のある表示コンテンツまたはアクセシブルなラベルを提供してください。特定の周囲のコントロールについて、実際のアナウンス内容を確認してください。

アクセシビリティ準拠

このコンポーネントのアクセシビリティ準拠は、製品の公式アクセシビリティ ステートメントおよびレンダリングされる使用状況のコンテキストに対して検証する必要があります。

トラブルシューティング

Angular 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

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