Class IgxAvatarComponent

アバターは、画像、アイコン、またはイニシャルを表示する方法を提供します。

Igx Module

IgxAvatarModule

Igx Theme

igx-avatar-theme, igx-icon-theme

Igx Keywords

avatar, profile, picture, initials

Igx Group

レイアウト

備考

Ignite UI Avatar はアプリケーションにアバター アイコンを追加するコンポーネントです。 アイコンは画像、イニシャル、または Google マテリアル アイコン セットのマテリアル アイコンが可能です。

<igx-avatar initials="MS" shape="rounded" size="large">
</igx-avatar>

実装

  • OnInit

コンストラクター

プロパティ

ariaLabel: string = 'avatar'

アバターの aria-label 属性を返します。

let ariaLabel = this.avatar.ariaLabel;
bgColor: string

アバターの背景色を設定します。

<igx-avatar bgColor="yellow"></igx-avatar>

Igx Friendly Name

背景色

color: string

アバターの initials および icon 色を設定します。

<igx-avatar color="blue"></igx-avatar>
elementRef: ElementRef<any>
icon: string

アバターに icon を設定します。マテリアル アイコン セットのすべてのアイコンがサポートされます。

<igx-avatar icon="phone"></igx-avatar>
id: string = ...

アバターの id を設定します。設定されない場合、最初のアバター コンポーネントの id = "igx-avatar-0" になります。

<igx-avatar id="my-first-avatar"></igx-avatar>
initials: string

アバターに initials を設定します。

<igx-avatar initials="MN"></igx-avatar>
role: string = 'img'

アバターの role 属性を返します。

let avatarRole = this.avatar.role;
roleDescription: string

アバターのタイプを返します。 アバターのタイプは:

  • "initials タイプのアバター"
  • "icon タイプのアバター"
  • "image タイプのアバター" です。
  • "custom タイプのアバター" です。

let avatarDescription = this.avatar.roleDescription;
shape: "square" | "circle" | "rounded" = 'square'

アバターの形状を square、rounded、または circular に設定します。 デフォルトでは、アバターの形状は square です。

<igx-avatar shape="rounded"></igx-avatar>
src: string

アバターの画像ソースを設定します。

<igx-avatar src="images/picture.jpg"></igx-avatar>

Igx Friendly Name

画像の URL

アクセサー