Angular Avatar (アバター) コンポーネントの概要

Angular Avatar コンポーネントは、イニシャル、画像、またはマテリアルアイコンをアプリケーションに追加します。

Angular Avatar の例

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

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

ng add igniteui-angular

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

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

// app.module.ts

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

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

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

// home.component.ts

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

@Component({
    selector: 'app-home',
    template: '<igx-avatar shape="circle"></igx-avatar>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxAvatarComponent]
})
export class HomeComponent {}

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

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

Ignite UI for Angular Avatar コンポーネントには、3 つの形状 (正方形、角丸、円) と 3 つのサイズオプション (大、中、小) があります。イニシャル、画像、またはアイコンを表示できます。

Avatar の形状

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

<igx-avatar shape="circle"></igx-avatar>

イニシャルを表示するアバター

イニシャル ('John Smith' の場合 'JS') を使用した簡易なアバターを作成するには、以下のコードをコンポーネントのテンプレートに追加します。

<igx-avatar initials="JS" shape="circle"></igx-avatar>

アバターを丸形に設定し、サイズを大きくします。

<igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>

background プロパティを使用して背景色を変更できます。また、color プロパティを使用してイニシャルの色を設定します。

// avatar.component.scss

igx-avatar {
    background: #e41c77;
    color: #000000;
}

Warning

igx-avatar コンポーネントの roundShape プロパティは廃止されました。代わりに shape 属性を使用する必要があります。

以下は結果です。

画像を表示するアバター

画像を表示するアバターを作成するには、src プロパティで画像ソースを設定します。

<igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
            shape="rounded"
            size="large">
</igx-avatar>

ここまでの内容が正しければ、以下のように表示されます。

アイコンを表示するアバター

アバターでアイコンを表示するには、icon プロパティを設定します。現在、マテリアルアイコンセットのすべてのアイコンがサポートされます。

<igx-avatar icon="person"
            shape="rounded"
            size="small">
</igx-avatar>

以下は結果です。

スタイル設定

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

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

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

最も簡単な方法は、avatar-theme を拡張する新しいテーマを作成し、$background、$color と $border-radius パラメーターを受け取る方法です。

次のマークアップを前提として:

<div class="initials-avatar">
    <igx-avatar>BA</igx-avatar>
</div>

テーマを作成する必要があります:

$custom-avatar-theme: avatar-theme(
    $background: #72da67,
    $color: #000000,
    $border-radius: 16px
);

CSS 変数の使用

最後にアバターのカスタムテーマを渡します。

.initials-avatar {
    @include css-vars($custom-avatar-theme);
}

ミックスインの使用

Internet Explorer 11 以前などブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチが必要です。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。一方、カスタムテーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
    ::ng-deep {
        // Custom avatar theme を `igx-avatar` ミックスインに渡します
        .initials-avatar {
            @include avatar($custom-avatar-theme);
        }
    }
}

ここまでの内容が正しければ、以下のように表示されます。

カスタムサイズ変更

igx-avatar を直接ターゲットとして --size 変数を使用することができます。

igx-avatar {
  --size: 200px;
}

または、ユニバーサル変数 --igx-avatar-size を使用して、すべてのインスタンスをターゲットにすることもできます。

<div class="my-app">
  <igx-avatar></igx-avatar>
</div>

.my-app {
  --igx-avatar-size: 200px;
}

size 属性が適用されていない場合は、事前定義されたサイズの 1 つを使用して、それを --ig-size 変数に割り当てることもできます。--ig-size に使用可能な値は、--ig-size-small、--ig-size-medium、--ig-size-large です。

igx-avatar {
    --ig-size: var(--ig-size-small);
}

詳細については、サイズの記事をご覧ください。

API リファレンス

IgxAvatarComponent

テーマの依存関係

その他のリソース

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