Ignite UI for Angular

すべて
  • パブリック
  • パブリック/保護
  • すべて

クラス IgxAvatarComponent

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

@igxmodule

IgxAvatarModule

@igxtheme

igx-avatar-theme, igx-icon-theme

@igxkeywords

avatar, profile, picture, initials

@igxgroup

Layouts

@備考:

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

@例:
<igx-avatar initials="MS" [roundShape]="true" size="large">
</igx-avatar>

階層

  • IgxAvatarComponent

実装

  • OnInit

コンストラクタ

プロパティ

アクセサー

コンストラクタ

constructor

プロパティ

ariaLabel

ariaLabel: string = "avatar"

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

@例:
let ariaLabel = this.avatar.ariaLabel;

bgColor

bgColor: string

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

@例:
<igx-avatar bgColor="yellow"></igx-avatar>
@igxfriendlyname

Background color

color

color: string

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

@例:
<igx-avatar color="blue"></igx-avatar>

elementRef

elementRef: ElementRef

icon

icon: string

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

@例:
<igx-avatar icon="phone"></igx-avatar>

id

id: string = `igx-avatar-${NEXT_ID++}`

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

@例:
<igx-avatar id="my-first-avatar"></igx-avatar>

image

image: ElementRef

これは DOM のアバターの image 要素への参照です。

@例:
 let image = this.avatar.image;

initials

initials: string

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

@例:
<igx-avatar initials="MN"></igx-avatar>

role

role: string = "img"

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

@例:
let avatarRole = this.avatar.role;

roleDescription

roleDescription: string

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

  • "initials タイプのアバター"
  • "icon タイプのアバター"
  • "image タイプのアバター"
  • "custom タイプのアバター"
@例:
let avatarDescription = this.avatar.roleDescription;

roundShape

roundShape: boolean = false

[roundShape] が true に設定されている場合、アバターを丸形に設定します。 アバターの図形はデフォルトで四角です。

@例:
<igx-avatar [roundShape]="true" ></igx-avatar>

src

src: string

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

@例:
<igx-avatar src="images/picture.jpg"></igx-avatar>
@igxfriendlyname

Image URL

アクセサー

size

type