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），仅供参考
企业数字化 ERP 产品动态
相关推荐
Redmine API 从 0 到 1：5 步搞定项目自动化集成的完整指南 Redmine API 从 0 到 1：5 步搞定项目自动化集成的完整指南 【免费下载链接】redmine Mirror of redmine code source - Official Subversion repository is at https://svn.redmine.org/redmine - contact: vividtone or maeda (at) farend (dot) jp 项目地址: ht… · 2026/9/26 2:22:39
Voicebox上手指南：本地声音克隆与语音生成，从几秒音频到能用的声音 Voicebox上手指南：本地声音克隆与语音生成，从几秒音频到能用的声音 【免费下载链接】voicebox The open-source AI voice studio. Clone, dictate, create. 项目地址: https://gitcode.com/GitHub_Trending/voicebox1/voicebox
Voicebox 是一个开… · 2026/9/26 2:22:39
WWW ‘26论文背后的PromptX：一个带长期记忆的认知智能体平台是怎么设计出来的 WWW 26论文背后的PromptX：一个带长期记忆的认知智能体平台是怎么设计出来的 【免费下载链接】PromptX PromptX 领先的AI 智能体上下文平台 ｜ PromptX Leading AI Agent Context Platform 项目地址: https://gitcode.com/Deepractice/PromptX
Pr… · 2026/9/26 2:22:39
Baserow 无代码数据库快速上手：Docker 一键部署指南 Baserow 无代码数据库快速上手：Docker 一键部署指南 【免费下载链接】baserow Build databases, automations, apps & agents with AI — no code. Open source platform available on cloud and self-hosted. GDPR, HIPAA, SOC 2 compliant. Best Airtable alt… · 2026/9/26 2:59:46
Liquibase实战：从核心原理到SpringBoot集成，一文搞定数据库版本管理 1. 为什么我给团队强制引入了 Liquibase：先讲一次差点背锅的经历先说一个真实的事。有一年我负责一个老项目的升级改造，数据库里有张订单表要加一个user_coupon_id字段。开发环境是我加的，测试环境是我同事加的，生产环境上线当天 … · 2026/9/26 2:59:46
RapidJSON StringBuffer 实战指南：如何用缓冲区输出流快速写出 JSON RapidJSON StringBuffer 实战指南：如何用缓冲区输出流快速写出 JSON 【免费下载链接】rapidjson A fast JSON parser/generator for C with both SAX/DOM style API 项目地址: https://gitcode.com/GitHub_Trending/ra/rapidjson
C 里序列化 JSON 常靠 std::… · 2026/9/26 2:59:46
DSH部署五大systemd坑位解析与实战修复指南 1. 项目概述：这不是一份安装指南，而是一份“血泪备忘录”如果你刚在终端里敲下dsh install，屏幕还没来得及刷完第一行日志，就看到error: dsh: plugin tree failed to load: dsh: plugin(s) failed to load: deep，或者反… · 2026/9/26 2:59:46
红日靶场8四层内网横向渗透实战：哈希传递、代理链与告警分析 红日靶场8这个系列写到第四篇，终于要动四层内网了。前几篇从边界Web打点进去，一路打到第三层，中间经历了弱口令尝试、RCE利用、数据库提权、内网穿透，整个过程更像是在解决“进去”和“站稳”的问题。到了四层，玩法会变… · 2026/9/26 2:59:40
数据库课后习题答案别硬背：当测试用例集刷，效率翻倍 简介：万常选版《数据库原理与设计》课后习题答案资源，覆盖第2至6章及第9章，适合正在学习关系模型、数据库建模、关系数据理论与模式求精的本科生、自学者作为复习与自测材料。压缩包共7个文件，含3个doc参考答案、2个sql示例脚本、… · 2026/9/26 0:00:21
OpenClaw 替代品？Hermes Agent 踩坑实录：macOS 飞书接入 TaoToken 配置 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 0:00:40
向下兼容与向上兼容：接口设计中的兼容性策略与工程实践 一次版本升级事故，是很多团队绕不过去的坎。线上环境里，服务端明明已经上线了新版接口，老的移动端还在照着旧文档传参数。请求一到网关，校验直接拒绝，用户操作失败，客服群炸了锅，开发群里开始互… · 2026/9/26 0:00:46
