Avatar

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

import { NzAvatarModule } from 'ng-zorro-antd/avatar';

Examples

Three sizes and two shapes are available.

expand codeexpand code
      Loading...
    
Edward

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 display.

expand codeexpand code
      Loading...
    
UUSERU

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

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]The address of the image for an image avatarstring-
[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-
(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>