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

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

Angular Avatar の例

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxAvatarModule } from "igniteui-angular";
import { AvatarSample3Component } from "./avatar-sample-3/avatar-sample-3.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	AvatarSample3Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxAvatarModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
  selector: 'app-avatar-sample-3',
  styleUrls: ['./avatar-sample-3.component.scss'],
  templateUrl: './avatar-sample-3.component.html'
})
export class AvatarSample3Component {

  constructor() { }

}
tsコピー

<article class="avatars-wrapper">
    <div class="avatar-sample initials">
        <igx-avatar initials="JS" size="medium"></igx-avatar>
    </div>
    <div class="avatar-sample">
        <igx-avatar src="https://www.infragistics.com/angular-demos-lob/assets/images/men/1.jpg" [roundShape]="true" size="medium"></igx-avatar>
    </div>
    <div class="avatar-sample icon">
        <igx-avatar icon="person" [roundShape]="true" size="medium"></igx-avatar>
    </div>
</article>
htmlコピー

.avatars-wrapper {
    display: flex;
    flex-flow: row wrap;
}

.avatar-sample {
    display: flex;
    flex: 1 0 30%;
    width: 88px;
    height: 88px;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

.avatar-sample.initials .igx-avatar{
    background: #e41c77;
}

.avatar-sample.icon .igx-avatar{
    background: #9e9e9e;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

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

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

ng add igniteui-angular
cmd

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 {}
typescript

あるいは、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 {}
typescript

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>
html

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

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

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

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

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

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

// avatar.component.scss

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

scss

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

以下は結果です。

画像を表示するアバター

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

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

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

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

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

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

以下は結果です。

スタイル設定

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

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

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

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

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

<div class="avatar-sample initials">
  <igx-avatar initials="JS" size="medium"></igx-avatar>
</div>
html

以下のアバター テーマを作成します。

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

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

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

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxAvatarModule } from "igniteui-angular";
import { AvatarStylingSampleComponent } from "./avatar-styling/avatar-styling.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	AvatarStylingSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxAvatarModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-avatar-styling',
  styleUrls: ['./avatar-styling.component.scss'],
  templateUrl: './avatar-styling.component.html'
})

export class AvatarStylingSampleComponent {

}
tsコピー

<article class="avatars-wrapper">
    <div class="avatar-sample initials">
        <igx-avatar initials="JS" size="medium"></igx-avatar>
    </div>
    <div class="avatar-sample icon">
        <igx-avatar icon="person" [roundShape]="true" size="medium"></igx-avatar>
    </div>
</article>
htmlコピー

@use '../../variables' as *;

.avatars-wrapper {
    display: flex;
    flex-flow: row wrap;
}

.avatar-sample {
    display: flex;
    flex: 1 0 30%;
    width: 88px;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

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

$icon-avatar-theme: avatar-theme(
    $background: #217346,
    $color: #ffffff
);

/* Using Theme Overrides to provide IE 11 support.
 * NOTE: Theming using this approach will greatly increase the size
 * of the output CSS. If you do not plan to target IE 11,
 * delete this section and use the `igx-css-vars` mixin as shown above.
**/
.initials{
    @include avatar($initials-avatar-theme);
}

.icon{
    @include avatar($icon-avatar-theme);
}
scssコピー

Edit in: CodesandboxStackBlitz

カスタム サイズ変更

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

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

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

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

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

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

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

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

API リファレンス

• IgxAvatarComponent

テーマの依存関係

• IgxAvatar テーマ
• IgxIcon テーマ

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)