UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载列表是数据展示类页面中使用频率最高的组件之一。在 ng-zorro-antdAngular 版 Ant Design中nz-list组件支持大large、中default、小small三种尺寸并允许通过nzHeader/nzFooter灵活自定义列表头部与尾部。本文以官方「简单列表Simple list」示例 components/list/demo/simple.ts 为骨架结合 NzListComponent 源码与样式实现完整讲解尺寸切换、头部/尾部自定义、列表项操作区配置等核心用法读完即可直接在你的 Angular 项目中落地。三种尺寸默认、大、小Ant Design 列表默认提供三种尺寸默认default、大large、小small。在 ng-zorro-antd 中通过nzSize输入属性控制不设置nzSize或设为default列表使用默认尺寸设置nzSizelarge列表使用大尺寸设置nzSizesmall列表使用小尺寸。nzSize的类型定义在组件源码中Input() nzSize: NzSizeLDSType default;即取值集合为large | small | default默认值为default见 list.component.ts。尺寸差异体现在宿主类上[class.ant-list-lg]: nzSize large, [class.ant-list-sm]: nzSize small,对应的样式由 style/index.less 定义ant-list-lg与ant-list-sm分别通过list-item-padding-lg与list-item-padding-sm调整列表项内边距从而形成视觉上的大小差异。边框模式下nzBordered头部、尾部与列表项的内边距也会随之联动见 style/bordered.less。尺寸的实际效果对比场景写法效果默认尺寸nz-list nzBordered nzHeaderHeader nzFooterFooter不写nzSize即使用默认中等尺寸小尺寸nz-list nzBordered nzSizesmall列表项内边距缩小更紧凑大尺寸ul nz-list nzBordered nzSizelarge列表项内边距放大更宽松说明nz-list组件同时支持元素选择器nz-list与属性选择器ul nz-list见 list.component.ts两种写法在官方示例中均有出现可混用。自定义头部与尾部nzHeader / nzFooter 与子组件列表头部和尾部有两种自定义方式官方示例两种都用到了方式一字符串属性nzHeader/nzFooternz-list nzBordered nzHeaderHeader nzFooterFooter ... /nz-listnzHeader与nzFooter的类型为string | TemplateRefvoid见 list.component.ts支持纯文本字符串也支持传入模板引用实现富内容。源码中通过nzStringTemplateOutlet统一渲染if (nzHeader) { nz-list-header ng-container *nzStringTemplateOutletnzHeader{{ nzHeader }}/ng-container /nz-list-header }头部在列表数据渲染之前输出尾部在数据与分页nzPagination之后输出见 list.component.ts。此外组件还会检测「末项之后是否还有内容」hasSomethingAfterLastItem只要存在尾部、加载更多或分页最后一项的分割线就会被保留避免视觉断层list.component.ts、style/index.less。方式二投影子组件nz-list-header/nz-list-footernz-list nzBordered nzSizesmall nz-list-headerHeader/nz-list-header ... nz-list-footerFooter/nz-list-footer /nz-listnz-list-header与nz-list-footer是内容投影组件见 list-cell.ts分别映射ant-list-header与ant-list-footer样式类。注意无论用哪种方式最终都会渲染为nz-list-header/nz-list-footer元素因此字符串属性写法与子组件写法在视觉上完全等价可任选其一也可混用。ContentChild(NzListFooterComponent) nzListFooterComponent!: NzListFooterComponent;源码同时通过ContentChild捕获投影的子组件用于上述hasSomethingAfterLastItem判断list.component.ts。完整示例代码拆解官方「简单列表」示例 components/list/demo/simple.ts 完整代码如下一次性覆盖三种尺寸与两种头部/尾部写法import { Component, inject } from angular/core; import { NzListModule } from ng-zorro-antd/list; import { NzMessageService } from ng-zorro-antd/message; import { NzTypographyModule } from ng-zorro-antd/typography; Component({ selector: nz-demo-list-simple, imports: [NzListModule, NzTypographyModule], template: h3Default Size/h3 nz-list nzBordered nzHeaderHeader nzFooterFooter for (item of data; track item) { nz-list-item span nz-typographymark[ITEM]/mark/span {{ item }} /nz-list-item } /nz-list h3Small Size/h3 nz-list nzBordered nzSizesmall nz-list-headerHeader/nz-list-header for (item of data; track item) { nz-list-item{{ item }}/nz-list-item } nz-list-footerFooter/nz-list-footer /nz-list h3Large Size/h3 ul nz-list [nzDataSource]data nzBordered nzSizelarge nz-list-headerHeader/nz-list-header for (item of data; track item) { li nz-list-item nzNoFlex ul nz-list-item-actions nz-list-item-action a (click)msg.info(edit)edit/a /nz-list-item-action /ul {{ item }} /li } nz-list-footerFooter/nz-list-footer /ul , styles: h3 { margin: 16px 0; } h3:first-child { margin-top: 0; } h3:last-child { margin-bottom: 0; } }) export class NzDemoListSimpleComponent { public readonly msg inject(NzMessageService); data [ Racing car sprays burning fuel into crowd., Japanese princess to wed commoner., Australian walks 100km after outback crash., Man charged over missing wedding girl., Los Angeles battles huge wildfires. ]; }关键点说明模块导入示例直接使用imports: [NzListModule, NzTypographyModule]Angular 独立组件写法引入ng-zorro-antd/list下的NzListModule使用消息提示msg.info(...)时还需引入NzMessageService。数据渲染示例使用 Angular 控制流语法for (item of data; track item)手动遍历数据nz-list也支持nzDataSource输入属性 nzRenderItem模板的组合方式见 list.component.ts。列表项操作区ul nz-list-item-actions是操作区容器nz-list-item-action是单个操作项两者组合可渲染「编辑」等操作入口见 list-item-cell.ts。源码中nz-list-item-actions会对非末项自动插入ant-list-item-action-split分隔线list-item-cell.ts。nzNoFlex大尺寸示例中为li设置了nzNoFlex表示列表项不使用 flex 布局渲染类型见 list-item.component.ts此时操作区在水平布局下会向右浮动style/index.less。配套样式边框、分隔与响应式边框nzBordered默认false开启后整个列表带 1px 边框与圆角头部、尾部、列表项的内边距统一调整为padding-lg见 bordered.less。分隔线nzSplit默认true控制列表项之间的分割线默认开启list.component.ts关闭后列表项之间不再渲染border-bottom见 style/index.less。响应式在屏幕宽度不超过screen-md约 992px时操作区左间距缩小至 24px不超过screen-sm约 576px时列表项允许换行、操作区左间距进一步缩小至 12px垂直布局下额外内容extra自动换行到主体之上见 responsive.less因此三种尺寸在移动端也能自适应展示。与 List 其他能力的衔接本文的简单列表是nz-list能力的最小闭环。若需要进一步扩展可参考同目录下的其他官方示例nzGrid栅格化列表demo/grid.ts、nzLoadMore加载更多demo/loadmore.ts、nzPagination分页、nzItemLayoutvertical垂直布局demo/vertical.ts以及无限滚动demo/infinite-load.ts完整 API 表格见 doc/index.en-US.md 与 doc/index.zh-CN.md。小结尺寸nzSize取large | small | default不设置即为默认中等尺寸源码通过ant-list-lg/ant-list-sm样式类调整内边距。头部/尾部nzHeader/nzFooter字符串属性与nz-list-header/nz-list-footer子组件两种写法等价且可混用。配套能力nzBordered边框、nzSplit分隔线、nz-list-item-actions操作区、nzNoFlex非 flex 渲染组合起来即可构建带操作入口、自适应屏幕的完整列表。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Ant Design List 组件从零入门三种尺寸size切换与 header / footer 自定义指南Ant Design List 组件从零入门三种尺寸size切换与 header / footer 自定义指南 导读 List 是 Ant Design前端UI组件设计系统ng-zorro-antd Avatar 头像组件实战三种尺寸与两种形状的完整配置指南ng zorro antd Avatar 头像组件实战三种尺寸与两种形状的完整配置指南 本篇技术指南以 ng zorro antd 官方演示 basic 为核UI组件前端ng-zorro-antd 表单尺寸nzSize使用指南从 API 到源码级原理ng zorro antd 表单尺寸nzSize使用指南从 API 到源码级原理 在 ng zorro antd 中表单Form是一套以 AngulUI组件前端上一篇fuck-coding-interviews搜索算法指南二分查找与线性搜索的Python实现下一篇zkp-hmac-communication-python社区贡献者表彰突出贡献者故事与技术分享创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
