Avatar头像

用来代表用户或事物,支持图片、图标或字符展示。

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

代码演示

头像有三种尺寸,两种形状可选。

expand codeexpand code
加载中
Edward

对于字符型的头像,当字符串较长时,字体大小可以根据头像宽度自动调整。

expand codeexpand code
加载中
UNGU+2

头像组合展现。

expand codeexpand code
加载中
UUSERU

支持三种类型:图片、Icon 以及字符,其中 Icon 和字符型可以自定义图标颜色及背景色。

expand codeexpand code
加载中

0

1

2

3

4

5

6

7

8

9

通常用于消息提示。

expand codeexpand code
加载中

API#

nz-avatar#

参数说明类型默认值全局配置
[nzIcon]设置头像的图标类型,参考 Iconstring-
[nzShape]指定头像的形状'circle' | 'square''circle'
[nzSize]设置头像的大小'large' | 'small' | 'default' | number'default'
[nzGap]字符类型距离左右两侧边界单位像素number4
[nzSrc]图片类头像的资源地址string-
[nzSrcSet]设置图片类头像响应式资源地址string-
[nzAlt]图像无法显示时的替代文本string-
[nzText]文本类头像string-
(nzError)图片加载失败的事件,调用 preventDefault 方法会阻止组件默认的 fallback 行为EventEmitter<Event>-

nz-avatar-group#

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