NG-YUNZAI- CURD
st 表格 sv 查看 se 编辑 cell 单元格数据 sf 动态表单 LIB
- 基础
hotkey 热键 let 定义 media HTML5媒体 reuse-tab 路由复用标签 loading 加载指示符 pdf Pdf lodop Lodop打印 xlsx Excel 操作 Observers 观察者 onboarding 用户引导流程 zip Zip 操作 图表 G2 LIB avatar-list 用户头像列表 count-down 倒计时 down-file 下载文件 主题系统 LIB 工具集 LIB
- 表单
range-picker 日期范围 error-collect 表单异常消息采集器
- 布局
sg 简易栅格 ellipsis 文本自动省略号 exception 异常 footer-toolbar 底部工具栏 full-content 全屏工作区 global-footer 全局页脚 page-header 页头 result 处理结果 tag-select 标签选择器
- 业务
用户认证 LIB notice-icon 通知菜单 quick-menu 快速菜单 访问控制列表 LIB 缓存 LIB Mock模拟数据 LIB
- 其它
auto-focus 自动获得焦点 highlight 高亮
一组用户头像，常用在项目/团队成员列表。可通过设置 size 属性来指定头像大小。
代码演示
+2
maxLength attribute specifies the maximum number of items to show while excessItemsStyle style the excess item component.
import { Component } from '@angular/core';
import { AvatarListModule } from '@yelon/abc/avatar-list';
@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 tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
<avatar-list-item tips="Cipchk" text="Cipchk" />
<avatar-list-item tips="heart-o" icon="heart-o" />
</avatar-list>`,
standalone: true,
imports: [AvatarListModule]
})
export class ComponentsAvatarListMaxLengthComponent {}Cipchk
最简单的用法。
import { Component } from '@angular/core';
import { AvatarListModule } from '@yelon/abc/avatar-list';
@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 tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
<avatar-list-item tips="Cipchk" text="Cipchk" />
<avatar-list-item tips="heart-o" icon="heart-o" />
</avatar-list>`,
standalone: true,
imports: [AvatarListModule]
})
export class ComponentsAvatarListSimpleComponent {}