Avatar头像

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

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

代码演示

Avatar头像 - 图1

基本

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

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

Avatar头像 - 图2

自动调整字符大小

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

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

Avatar头像 - 图3

类型

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

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

Avatar头像 - 图4

带徽标的头像

通常用于消息提示。

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

API

nz-avatarcomponent

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