avatar-list 用户头像列表

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

import { AvatarListModule } from '@delon/abc/avatar-list';

代码演示

要显示的最大项目

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

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 {
}

基础样例

最简单的用法。

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

avatar-list-item