Angular Badge (バッジ) コンポーネントの概要

Angular Badge の例

Ignite UI for Angular Badge を使用した作業の開始

Ignite UI for Angular Badge コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxBadgeModule をインポートします。

// app.module.ts

...
import { IgxBadgeModule } from 'igniteui-angular/badge';
// import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  ...
  imports: [..., IgxBadgeModule],
  ...
})
export class AppModule {}

あるいは、16.0.0 以降、IgxBadgeComponent をスタンドアロンの依存関係としてインポートできます。

// home.component.ts

...
import { IgxBadgeComponent } from 'igniteui-angular/badge';
// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>',
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IgxBadgeComponent]
})
export class HomeComponent {}

Ignite UI for Angular Badge モジュールまたはコンポーネントをインポートしたので、igx-badge コンポーネントの基本構成を開始できます。

Angular Badge コンポーネントの使用

デモ サンプルの実行方法を見てみましょう。アバターのシンプルな success スタイルのバッジです。これを構築するためには、IgxBadgeModule とともに IgxAvatarModule をインポートする必要があります。

// app.module.ts
...
import { IgxBadgeModule } from 'igniteui-angular/badge';
import { IgxAvatarModule } from 'igniteui-angular/avatar';
// import {  IgxBadgeModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  ...
  imports: [..., IgxBadgeModule, IgxAvatarModule],
  ...
})

export class AppModule {}

あるいは、16.0.0 以降、IgxBadgeComponent と IgxAvatarComponent をスタンドアロンの依存関係としてインポートできます。

次に、これらのコンポーネントをテンプレートに追加します。

<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;
}

バッジの形状

shape 属性の値を square に設定することで、バッジの形状を変更できます。デフォルトでは、バッジの形状は rounded です。

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

すべて適切に設定すると、ブラウザ上で以上のデモ サンプルを確認することができます。

バッジのサイズ

バッジのサイズは --size 変数を使用して制御できます。これにより、バッジのサイズが両方向に比例して調整されます。ただし、テキスト値を含むバッジでは、フォント サイズと行の高さに caption タイポグラフィ スタイルが使用されることに注意してください。そのため、テキストを含むバッジの --size を 16 px 未満の値に設定する場合は、そのタイポグラフィも変更する必要があります。

例:

igx-badge {
  --size: 12px;

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

バッジの値とアイコン

バッジ内にテキストまたは数値カウントを表示するには、[value] 入力を使用します。

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

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

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

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

<!-- アイコン "check" と値 "5" の両方が表示されます -->
<igx-badge icon="check" value="5" type="success"></igx-badge>

または、コンテンツを直接埋め込むこともできます。

  <igx-badge>{{ model.value }}</igx-badge>

  <!-- 
  アイコンとテキストの両方を埋め込む場合は、正しいパディングを維持するためにテキストをラップしてください。 -->
  <igx-badge>
    <igx-icon>bluetooth</igx-icon>
    <span>Bluetooth</span>
  </igx-badge>

バッジのアイコン

igx-badge コンポーネントは、Material アイコンに加えてMaterial アイコン拡張およびその他のカスタム アイコン セットの使用もサポートしています。Material アイコン拡張セットからバッジ コンポーネントにアイコンを追加するには、まずそのアイコンを登録する必要があります。

export class BadgeIconComponent implements OnInit { 
  constructor (protected _iconService: IgxIconService) {}

  public ngOnInit() {
    this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
  }
}

そうすると、次のようにアイコン名とファミリを指定すればよいです。

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

アウトライン バッジ

igx-badge コンポーネントは、outlined 属性を設定することで、バッジの周囲に微妙な境界線を表示することもできます。

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

境界線の色は、badge-theme の $border-color プロパティでカスタマイズすることもできます。

ドット バッジ

igx-badge コンポーネントは、dot プロパティを有効にすることで、通知用の最小限のドット インジケーターとして表示することもできます。ドット バッジはコンテンツをサポートしませんが、アウトライン表示が可能で、利用可能なすべてのドット タイプ (例: primary、success、info など) を使用できます。

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

リストのバッジ

チャット クライアントのような連絡先リストを作成します。連絡先の名前を表示し、アバターおよび連絡先の現在状態 (オンライン、オフライン、退席中) を表示します。これを達成するには、igx-badge および igx-avatar コンポーネントを使用します。コンテナーの場合、igx-list が使用されます。

続行するには、必要なすべてのモジュールを含めて、app.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxListModule } from 'igniteui-angular/list';
import { IgxAvatarModule } from 'igniteui-angular/avatar';
import { IgxBadgeModule } from 'igniteui-angular/badge';
// import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  ...
  imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
})
export class AppModule {}

サンプルでは、icon と type が icon と type という名前のモデルプロパティにバインドされています。

次に、テンプレートに連絡先を追加します。

<!-- contacts.component.html -->

<igx-list>
  <igx-list-item isHeader="true">
    Team Members (4)
  </igx-list-item>
  <igx-list-item *ngFor="let member of members">
    <div class="wrapper">
      <div>
        <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
        <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>   
      </div>
      <div class="contact-container">
        <span class="contact-name">{{ member.name }}</span>
      </div>  
</div>
  </igx-list-item>
</igx-list>

以下のように typescript ファイルにメンバーを作成します。

// contacts.component.ts

...
public members: Member[] = [
  new Member('Terrance Orta', 'online'),
  new Member('Donna Price', 'online'),
  new Member('Lisa Landers', 'away'),
  new Member('Dorothy H. Spencer', 'offline'),
];

...
class Member {
  public name: string;
  public status: string;
  public type: string;
  public icon: string;

  constructor(name: string, status: string) {
    this.name = name;
    this.status = status;
    switch (status) {
      case 'online':
        this.type = 'success';
        this.icon = 'check';
        break;
      case 'away':
        this.type = 'warning';
        this.icon = 'schedule';
        break;
      case 'offline':
        this.type = 'error';
        this.icon = 'remove';
        break;
    }
  }
}

親コンテナーにバッジを配置します。

/* contacts.component.css */

.wrapper {
  display: flex;
  flex-direction: row;
}

.contact-name {
  font-weight: 600;
}

.contact-container {
  margin-left: 20px;
}

.badge-style {
  position: absolute;
  bottom: 2.5px;
  left: 40px;
}

サンプルを正しく構成すると、アバターと、その状態を示すバッジとともにメンバーのリストが表示されます。

スタイル設定

Badge テーマのプロパティ マップ

$background-color プロパティを変更すると、次の依存プロパティが自動的に更新されます。

Badge のスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、badge-theme を拡張する新しいテーマを作成し、バッジの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。$background-color を設定すると、$icon-color と $text-color は、背景の色とのコントラストが高い黒または白に自動的に割り当てられます。なお、$border-radius プロパティはバッジの shape が square に設定されている場合のみ適用されます。

$custom-badge-theme: badge-theme(
  $background-color: #57a5cd,
  $border-radius: 4px
);

新しいテーマを含めるには、tokens ミックスインを使用します。

:host {
  @include tokens($custom-badge-theme);
}

デモ

Tailwind によるスタイル設定

カスタム Tailwind ユーティリティ クラスを使用して badge をスタイル設定できます。まず Tailwind を設定してください。

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

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

ユーティリティ ファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。

• light-* クラスはライト テーマ用です。
• dark-* クラスはダーク テーマ用です。
• プレフィックスの後にコンポーネント名を追加します (例: light-badge、dark-badge)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、badge-theme で確認できます。構文は次のとおりです:

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

最終的に、badge は次のようになります:

API リファレンス

• Avatar
• Badge
• IgxBadgeComponent スタイル
• List
• ListItem
• IgxBadgeType

テーマの依存関係

• IgxIcon テーマ

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

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