Avatar

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

Angular Avatar の例

使用方法

Avatar コンポーネントを初期化するには、以下のコマンドを実行して Ignite UI for Angular をインストールする必要があります。

ng add igniteui-angular

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

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

// app.module.ts

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

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

例

Avatar の形式は四角または丸で、3 つのサイズオプション (大、中、小) があります。イニシャル、画像、またはアイコンを表示できます。

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

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

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

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

<igx-avatar initials="JS"
            [roundShape]="true"
            size="medium">
</igx-avatar>

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

// avatar.component.scss

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

以下は結果です。

画像を表示するアバター

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

<igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
            [roundShape]="true"
            size="large">
</igx-avatar>

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

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

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

<igx-avatar icon="person"
            [roundShape]="true"
            size="small">
</igx-avatar>

以下は結果です。

スタイル設定

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

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

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

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

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

CSS 変数の使用

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

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

ミックスインの使用

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

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

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