List列表

通用列表。

何时使用#

最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

import { NzListModule } from 'ng-zorro-antd/list';

代码演示

Default Size

Header
[ITEM] Racing car sprays burning fuel into crowd.[ITEM] Japanese princess to wed commoner.[ITEM] Australian walks 100km after outback crash.[ITEM] Man charged over missing wedding girl.[ITEM] Los Angeles battles huge wildfires.
Footer

Small Size

Header
itemitemitemitemitem
Footer

Large Size

    Header
  • 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.
    • Footer
简单列表

列表拥有大、中、小三种尺寸。

通过设置 size 为 largesmall 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

可通过设置 nzHeader 和 nzFooter，来自定义列表头部和尾部。

expand codeexpand code
加载中
Ant Design, a design language for background applications, is refined by Ant UED Team

Ant Design Title 1

Ant Design, a design language for background applications, is refined by Ant UED Team

Ant Design Title 2

Ant Design, a design language for background applications, is refined by Ant UED Team

Ant Design Title 3

Ant Design, a design language for background applications, is refined by Ant UED Team

Ant Design Title 4

基础列表

基础列表。

expand codeexpand code
加载中
加载更多

可通过 loadMore 属性实现加载更多功能。

expand codeexpand code
加载中

ant design part 0 (page: 1)

Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
  • 156
  • 156
  • 2
logo

ant design part 1 (page: 1)

Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
  • 156
  • 156
  • 2
logo

ant design part 2 (page: 1)

Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
  • 156
  • 156
  • 2
logo

ant design part 3 (page: 1)

Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
  • 156
  • 156
  • 2
logo

ant design part 4 (page: 1)

Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
  • 156
  • 156
  • 2
logo
竖排列表样式

通过设置 nzItemLayout 属性为 vertical 可实现竖排列表样式。

expand codeexpand code
加载中
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
栅格列表

可以通过设置 nz-list 的 nzGrid 属性来实现栅格列表。

expand codeexpand code
加载中
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content
响应式的栅格列表

响应式的栅格列表。

expand codeexpand code
加载中
滚动加载无限长列表

结合 cdk-virtual-scroll 实现滚动加载无限长列表，带有虚拟化 virtualization 功能，能够提高数据量大时候长列表的性能。

Virtualized 是在大数据列表中应用的一种技术，主要是为了减少不可见区域不必要的渲染从而提高性能，特别是数据量在成千上万条效果尤为明显。

expand codeexpand code
加载中

API#

nz-list#

参数说明类型默认值
[nzBordered]是否展示边框booleanfalse
[nzFooter]列表底部string | TemplateRef<void>-
[nzHeader]列表头部string | TemplateRef<void>-
[nzItemLayout]设置 nz-list-item 布局, 设置成 vertical 则竖直样式显示, 默认横排'vertical' | 'horizontal''horizontal'
[nzLoading]当卡片内容还在加载中时，可以用 loading 展示一个占位booleanfalse
[nzSize]list 的尺寸'large' | 'small' | 'default''default'
[nzSplit]是否展示分割线booleantrue

nz-list-empty#

列表空内容组件

参数说明类型默认值
[nzNoResult]空内容显示内容string | TemplateRef<void>-

nz-list[nzGrid]#

使用栅格布局

nz-list-header#

列表头部位置组件

列表脚部位置组件

nz-list-pagination#

列表分页位置组件

nz-list-load-more#

列表加载更多位置组件

nz-list-item#

参数说明类型默认值
[nzNoFlex]是否非 flex 布局渲染booleanfalse

ul[nz-list-item-actions]#

列表项操作项容器组件

nz-list-item-action#

列表项操作项组件

nz-list-item-extra#

列表项扩展内容位置组件

nz-list-item-meta#

参数说明类型默认值
[nzAvatar]列表元素的图标string | TemplateRef<void>-
[nzDescription]列表元素的描述内容string | TemplateRef<void>-
[nzTitle]列表元素的标题string | TemplateRef<void>-

nz-list-item-meta-title#

列表项元信息标题部分组件

nz-list-item-meta-description#

列表项元信息描述部分组件

nz-list-item-meta-avatar#

列表项元信息头像部分组件

参数说明类型默认值
[nzSrc]图片类头像的资源地址string-