Avatar

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

Avatar デモ

使用方法

Ignite UI for Angular Avatar を初期化する前に、IgxAvatarModuleapp.module.ts ファイルにインポートします。

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

アバターを丸形に設定し、サイズを大きくします。bgColor プロパティを使用して背景色を変更できます。また、color プロパティを使用してイニシャルの色を設定します。これは入力プロパティで、コンポーネントのプロパティにバインドできます。

<igx-avatar initials="JS" 
            [roundShape]="isCircular" 
            size="medium" 
            [bgColor]="bgColor" 
            [color]="color">
</igx-avatar>
// avatar.component.ts
...
  public bgColor = "#0375be";
  public color = "black";
  public isCircular = true;

以下は結果です。

画像を表示するアバター

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

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

以下は結果です。

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

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

<igx-avatar icon="phone"
            roundShape="true"
            size="large">
</igx-avatar>

API リファレンス

その他のリソース

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