Badge

Ignite UI for Angular の Badge はアプリケーションで視覚的な通知が必要なアバター、ナビゲーション メニュー、またはその他のコンポーネントをデコレートする絶対配置要素です。Badge は情報、成功、警告、またはエラーを示す定義済みのスタイルを持つアイコンとして設定できます。

Badge デモ

Note

Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、すべての必要な依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。インストールのトピックで手順を参照できます。

使用方法

Ignite UI for Angular Badge を初期化する前に、IgxBadgeModuleapp.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxBadgeModule } from 'igniteui-angular';

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

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

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

// app.module.ts

...
import {
    IgxListModule,
    IgxAvatarModule,
    IgxBadgeModule
} from 'igniteui-angular';

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

構成の後、すべての連絡先を IgxList コンポーネントに表示します。リストはメンバー名および状態を表示します。

<!-- 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>
      <div>
        <span class="contact-name">{{ member.name }}</span>
        <span>({{ member.status }})</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>
// 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;
        }
    }
}

サンプルを正しく構成すると、メンバー名および状態を含むリストが表示されます。

各チャット メンバーの前にアバターを追加します。そのため、IgxAvatar を含む igx-list-item に div 要素を追加します。リスト項目コンテンツを以下のように変更します。

<!-- 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" roundShape="true" size="small"></igx-avatar>
      </div>
      <div style="margin-left: 20px; align-content: center;">
        <span class="contact-name">{{ member.name }}</span>
        <span>({{ member.status }})</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>

名前のみのリストはそれほど有用な情報を表示しません。最後に、igx-badge を追加し、連絡先の状態通知を表示します。バッジ コンポーネントをアバター コンポーネントに追加し、igx-list-item コンテンツを以下のコードのように変更します。

igx-badge には、バッジの外観を構成するための icon および type 入力があります。icon を設定するには、名前を公式のマテリアル アイコン セットから提供します。バッジの typedefaultinfosuccesswarning、または error に設定します。その型により、特定の背景色が適用されます。

このサンプルで、icon および typeicon および type のモデル プロパティにバインドされます。

バッジを親コンテナーに配置するには、badge-style のカスタム CSS クラスを作成し、bottom および right 位置を定義します。

<!-- 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" roundShape="true" size="small">
          <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
        </igx-avatar>
      </div>
      <div style="margin-left: 20px; align-content: center;">
        <span class="contact-name">{{ member.name }}</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>
<!-- contacts.component.css -->

.badge-style
{
  position: absolute;
  bottom: -6px;
  right: -50px;
}

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

API リファレンス

追加のリソース

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