企业官网建设流程全解析

• UI组件
• 前端

列表是数据展示类页面中使用频率最高的组件之一。在 ng-zorro-antd（Angular 版 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'），列表使用默认尺寸；
• 设置nzSize="large"，列表使用大尺寸；
• 设置nzSize="small"，列表使用小尺寸。

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组件同时支持元素选择器<nz-list>与属性选择器<ul nz-list>（见 list.component.ts），两种写法在官方示例中均有出现，可混用。

自定义头部与尾部：nzHeader / nzFooter 与子组件

列表头部和尾部有两种自定义方式，官方示例两种都用到了：

方式一：字符串属性nzHeader/nzFooter

<nz-list nzBordered nzHeader="Header" nzFooter="Footer"> ... </nz-list>

nzHeader与nzFooter的类型为string | TemplateRef<void>（见 list.component.ts），支持纯文本字符串，也支持传入模板引用实现富内容。源码中通过nzStringTemplateOutlet统一渲染：

@if (nzHeader) { <nz-list-header> <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container> </nz-list-header> }

头部在列表数据渲染之前输出，尾部在数据与分页（nzPagination）之后输出（见 list.component.ts）。此外，组件还会检测「末项之后是否还有内容」（hasSomethingAfterLastItem），只要存在尾部、加载更多或分页，最后一项的分割线就会被保留，避免视觉断层（list.component.ts、style/index.less）。

方式二：投影子组件nz-list-header/nz-list-footer

<nz-list nzBordered nzSize="small"> <nz-list-header>Header</nz-list-header> ... <nz-list-footer>Footer</nz-list-footer> </nz-list>

nz-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: ` <h3>Default Size</h3> <nz-list nzBordered nzHeader="Header" nzFooter="Footer"> @for (item of data; track item) { <nz-list-item> <span nz-typography><mark>[ITEM]</mark></span> {{ item }} </nz-list-item> } </nz-list> <h3>Small Size</h3> <nz-list nzBordered nzSize="small"> <nz-list-header>Header</nz-list-header> @for (item of data; track item) { <nz-list-item>{{ item }}</nz-list-item> } <nz-list-footer>Footer</nz-list-footer> </nz-list> <h3>Large Size</h3> <ul nz-list [nzDataSource]="data" nzBordered nzSize="large"> <nz-list-header>Header</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-footer>Footer</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.' ]; }

关键点说明

1. 模块导入：示例直接使用imports: [NzListModule, NzTypographyModule]（Angular 独立组件写法）引入ng-zorro-antd/list下的NzListModule；使用消息提示msg.info(...)时还需引入NzMessageService。
2. 数据渲染：示例使用 Angular 控制流语法@for (item of data; track item)手动遍历数据；nz-list也支持nzDataSource输入属性 +nzRenderItem模板的组合方式（见 list.component.ts）。
3. 列表项操作区：<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）。
4. 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分页、nzItemLayout="vertical"垂直布局（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组件
• 前端