Avatar

Used to represent users or things, supporting the display of images, icons, or characters.
Import
Source components/avatar
Docs Edit this page

Examples

Basic

Three sizes and two shapes are available.

expand codeexpand code
      Loading...
Edward
Autoset Font Size

For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.

expand codeexpand code
      Loading...
UNGU+2
Avatar Group

Avatar group display.

expand codeexpand code
      Loading...
UUSERU
Type

Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.

expand codeexpand code
      Loading...

0

1

2

3

4

5

6

7

8

9

With Badge

Usually used for messages remind.

expand codeexpand code
      Loading...

API#

nz-avatar#

PropertyDescriptionTypeDefaultGlobal Config
[nzIcon]The Icon type for an icon avatar, see Iconstring-
[nzShape]The shape of avatar'circle' | 'square''circle'✅
[nzSize]The size of the avatar'large' | 'small' | 'default' | number'default'✅
[nzGap]Letter type unit distance between left and right sidesnumber4✅
[nzSrc]Avatar image URLstring-
[nzSrcSet]a list of sources to use for different screen resolutionsstring-
[nzAlt]This attribute defines the alternative text describing the imagestring-
[nzText]Letter type avatarstring-
[nzLoading]Sets the native loading attribute on the avatar image element'eager' | 'lazy''eager'
[nzFetchPriority]Sets the native fetchpriority attribute on the avatar image element'high' | 'low' | 'auto''auto'
(nzError)Handler when img load error, call the preventDefault method to prevent default fallback behaviorEventEmitter<Event>-

nz-avatar-group#

<nz-avatar-group>
  <nz-avatar nzIcon="user"></nz-avatar>
  <!--  ...  -->
</nz-avatar-group>