• Avatar头像
    • 代码演示
    • API
      • 单独引入此组件
      • nz-avatarcomponent

    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-