NG-ALAIN- CURD
stTable svView seEdit sfDynamic Form LIB
- Basic
avatar-listAvatarList count-downCount down down-fileDownload file letLet mediaHTML5 Media reuse-tabReuse Route Tab loadingLoading indicator pdfPdf qrQR lodopLodop Print xlsxExcel Observers onboardingOnboarding zipZip ChartG2 LIB Theme System LIB Utils LIB
- Form
error-collectError Collect range-pickerData Range
- Layout
ellipsisEllipsis exceptionException footer-toolbarFooterToolbar full-contentFull Screen Workspace global-footerGlobal footer page-headerPage Header resultResult sgSimple Grid tag-selectTag Select
- Business
notice-iconNotification menu quick-menuQuick Menu Authentication LIB Access Control List LIB Cache LIB Mock LIB
- Other
auto-focusAuto focus highlightHighlight
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
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 {}Cipchk
Simplest of usage.
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
| Property | Description | Type | Default |
|---|---|---|---|
[size] | size of list | 'large','small','mini','default' | 'default' |
[maxLength] | max items to show | number | - |
[excessItemsStyle] | the excess item style | { [key: string]: string } | - |
avatar-list-item
| Property | Description | Type | Default |
|---|---|---|---|
[tips] | title tips for avatar item | string | - |
[src] | the address of the image for an image avatar | string | - |
[text] | text for avatar item | string | - |
[icon] | icon for avatar item | string | - |