AvatarList
IMPORT MODULE

A list of user's avatar for project or group member list frequently. If a large or small avatar-list is desired, set the size property to either large or small and mini respectively. Omit the size property for a avatar-list with the default size.

Examples

  • +2
Max Items to Show

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
Basic Usage

Simplest of usage.

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

PropertyDescriptionTypeDefault
[size]size of list'large','small','mini','default''default'
[maxLength]max items to shownumber-
[excessItemsStyle]the excess item style{ [key: string]: string }-

avatar-list-item

PropertyDescriptionTypeDefault
[tips]title tips for avatar itemstring-
[src]the address of the image for an image avatarstring-
[text]text for avatar itemstring-
[icon]icon for avatar itemstring-