用户头像列表
IMPORT MODULE

一组用户头像,常用在项目/团队成员列表。可通过设置 size 属性来指定头像大小。

代码演示

  • +2
要显示的最大项目

maxLength attribute specifies the maximum number of items to show while excessItemsStyle style the excess item component.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-avatar-list-maxLength',
  template: ` <avatar-list size="mini" maxLength="3" [excessItemsStyle]="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
    <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"></avatar-list-item>
    <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"></avatar-list-item>
    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"></avatar-list-item>
    <avatar-list-item tips="Cipchk" text="Cipchk"></avatar-list-item>
    <avatar-list-item tips="heart-o" icon="heart-o"></avatar-list-item>
  </avatar-list>`,
})
export class ComponentsAvatarListMaxLengthComponent {}
  • Cipchk
基础样例

最简单的用法。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-avatar-list-simple',
  template: ` <avatar-list size="mini">
    <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"></avatar-list-item>
    <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"></avatar-list-item>
    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"></avatar-list-item>
    <avatar-list-item tips="Cipchk" text="Cipchk"></avatar-list-item>
    <avatar-list-item tips="heart-o" icon="heart-o"></avatar-list-item>
  </avatar-list>`,
})
export class ComponentsAvatarListSimpleComponent {}

API

avatar-list

成员说明类型默认值
[size]头像大小'large','small','mini','default''default'
[maxLength]要显示的最大项目number-
[excessItemsStyle]多余的项目风格{ [key: string]: string }-

avatar-list-item

成员说明类型默认值
[tips]头像展示文案string-
[src]头像图片连接string-
[text]文本类头像string-
[icon]图标类型string-