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

    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';
// 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';
// 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, IgxAvatarModule } from 'igniteui-angular';
// 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 未満の値に設定する場合は、そのタイポグラフィも変更する必要があります。

    Example:

    igx-badge {
  --size: 12px;

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

    バッジのアイコン

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

    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 および igx-avatar コンポーネントを使用します。コンテナーの場合、igx-list が使用されます。

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

    // app.module.ts

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

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

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

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

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

    $custom-badge-theme: 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 badge($custom-badge-theme);
    Note

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

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

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

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

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

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

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

    デモ

    API リファレンス

    テーマの依存関係

    その他のリソース

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