Badge

Ignite UI Badge は、視覚的な通知が必要な場合にアプリケーションでアバター、ナビゲーション メニュー、またはその他のコンポーネントと共に使用されるコンポーネントです。バッジは情報、成功、警告、またはエラーを表示するために定義済みのスタイルを持つアイコンとしてデザインされます。

Angular Badge の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

Badge コンポーネントを初期化する前に、IgxBadgeModule を app.module.ts ファイルにインポートします。

// app.module.ts

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

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

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

// app.module.ts
...
import {
  IgxBadgeModule,
  IgxAvatarModule
} from 'igniteui-angular';

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

export class AppModule {}

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

<div class="wrapper">
    <igx-avatar icon="person" roundShape="true" 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;
}

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

リストのバッジ

チャット クライアントのような連絡先リストを作成します。連絡先の名前を表示し、アバターおよび連絡先の現在状態 (オンライン、オフライン、退席中) を表示します。これを達成するには、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 {}
Note

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

サンプルでは、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" roundShape="true" 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 のスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

@import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、igx-badge-theme を拡張する新しいテーマを作成し、バッジの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。

$custom-badge-theme: igx-badge-theme(
    $border-color: white,
    $border-width: 1px,
    $icon-color: white,
    $text-color: black,
    $shadow: 3px 2px 5px 0px rgba(0,0,0,0.4)
);

テーマを含む

最後にコンポーネントのテーマをアプリケーションに含めます。

$legacy-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。

 @include igx-badge($custom-badge-theme);
Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
     ::ng-deep {
        @include igx-badge($custom-badge-theme);
    }
}

$legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。

@include igx-css-vars($custom-badge-theme);
Note

コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバル セレクターが必要なため、:host を使用する必要があります。

:host {
    @include igx-css-vars($custom-badge-theme);
}

テーマを上記と同じ方法で含めることに注意してください。

デモ


API リファレンス

その他のリソース

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