Avatar头像

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

代码演示

Avatar头像 - 图1

基本

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-avatar-basic',
  5.   template: `
  6.     <div>
  7.       <nz-avatar [nzSize]="64" nzIcon="user"></nz-avatar>
  8.       <nz-avatar nzSize="large" nzIcon="user"></nz-avatar>
  9.       <nz-avatar nzIcon="user"></nz-avatar>
  10.       <nz-avatar nzSize="small" nzIcon="user"></nz-avatar>
  11.     </div>
  12.     <div>
  13.       <nz-avatar [nzShape]="'square'" [nzSize]="64" [nzIcon]="'user'"></nz-avatar>
  14.       <nz-avatar [nzShape]="'square'" [nzSize]="'large'" [nzIcon]="'user'"></nz-avatar>
  15.       <nz-avatar [nzShape]="'square'" [nzIcon]="'user'"></nz-avatar>
  16.       <nz-avatar [nzShape]="'square'" [nzSize]="'small'" [nzIcon]="'user'"></nz-avatar>
  17.     </div>
  18.   `,
  19.   styles: [
  20.     `
  21.       nz-avatar {
  22.         margin-top: 16px;
  23.         margin-right: 16px;
  24.       }
  25.     `
  26.   ]
  27. })
  28. export class NzDemoAvatarBasicComponent {}

Avatar头像 - 图2

自动调整字符大小

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

  1. import { Component } from '@angular/core';
  3. const userList = ['U', 'Lucy', 'Tom', 'Edward'];
  4. const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
  6. @Component({
  7.   selector: 'nz-demo-avatar-dynamic',
  8.   template: `
  9.     <nz-avatar
  10.       [nzText]="text"
  11.       nzSize="large"
  12.       [ngStyle]="{ 'background-color': color }"
  13.       style="vertical-align: middle;"
  14.     ></nz-avatar>
  15.     <button nz-button [nzType]="'dashed'" (click)="change()" style="margin-left: 16px; vertical-align: middle;">
  16.       <span>Change</span>
  17.     </button>
  18.   `,
  19.   styles: []
  20. })
  21. export class NzDemoAvatarDynamicComponent {
  22.   text: string = userList[3];
  23.   color: string = colorList[3];
  25.   change(): void {
  26.     let idx = userList.indexOf(this.text);
  27.     ++idx;
  28.     if (idx === userList.length) idx = 0;
  29.     this.text = userList[idx];
  30.     this.color = colorList[idx];
  31.   }
  32. }

Avatar头像 - 图3

类型

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-avatar-type',
  5.   template: `
  6.     <nz-avatar nzIcon="user"></nz-avatar>
  7.     <nz-avatar nzText="U"></nz-avatar>
  8.     <nz-avatar nzText="USER"></nz-avatar>
  9.     <nz-avatar nzIcon="user" nzSrc="//zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
  10.     <nz-avatar nzText="U" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
  11.     <nz-avatar nzIcon="user" style="background-color:#87d068;"></nz-avatar>
  12.   `,
  13.   styles: [
  14.     `
  15.       nz-avatar {
  16.         margin-top: 16px;
  17.         margin-right: 16px;
  18.       }
  19.     `
  20.   ]
  21. })
  22. export class NzDemoAvatarTypeComponent {}

Avatar头像 - 图4

带徽标的头像

通常用于消息提示。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-avatar-badge',
  5.   template: `
  6.     <nz-badge [nzCount]="5" style="margin-right: 24px;">
  7.       <nz-avatar nzIcon="user" [nzShape]="'square'"></nz-avatar>
  8.     </nz-badge>
  9.     <nz-badge nzDot>
  10.       <nz-avatar nzIcon="user" [nzShape]="'square'"></nz-avatar>
  11.     </nz-badge>
  12.   `
  13. })
  14. export class NzDemoAvatarBadgeComponent {}

API

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

  1. import { NzAvatarModule } from 'ng-zorro-antd';

nz-avatarcomponent

参数说明类型默认值
[nzIcon]设置头像的图标类型，参考 Iconstring-
[nzShape]指定头像的形状'circle'｜'square''circle'
[nzSize]设置头像的大小'large'｜'small'｜'default'｜number'default'
[nzSrc]图片类头像的资源地址string-
[nzText]文本类头像string-