List

Simple List.

When To Use#

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

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

Examples

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
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

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

Ant Design supports a default list size as well as a large and small size.

If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.

Customizing the nzHeader and nzFooter of list by setting nzHeader and nzFooter property.

expand codeexpand code
Loading...
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

Basic list.

expand codeexpand code
Loading...

Load more list with loadMore property.

expand codeexpand code
Loading...

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

Setting nzItemLayout property with vertical to create a vertical list.

expand codeexpand code
Loading...
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content

Creating a grid list by setting the nzGrid property of nz-list.

expand codeexpand code
Loading...
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content

Responsive grid list.

expand codeexpand code
Loading...

An example of infinite list & virtualized loading using cdk-virtual-scroll.

Virtualized rendering is a technique to mount big sets of data. It reduces the amount of rendered DOM nodes by tracking and hiding whatever isn't currently visible.

expand codeexpand code
Loading...

API#

nz-list#

PropertyDescriptionTypeDefault
[nzBordered]Toggles rendering of the border around the listbooleanfalse
[nzFooter]List footer rendererstring | TemplateRef<void>-
[nzHeader]List header rendererstring | TemplateRef<void>-
[nzItemLayout]The layout of list, default is horizontal, If a vertical list is desired, set the itemLayout property to vertical'vertical' | 'horizontal''horizontal'
[nzLoading]Shows a loading indicator while the contents of the list are being fetchedbooleanfalse
[nzSize]Size of list'large' | 'small' | 'default''default'
[nzSplit]Toggles rendering of the split under the list itembooleantrue

nz-list-empty#

Empty content component for the list.

PropertyDescriptionTypeDefault
[nzNoResult]Empty contentstring | TemplateRef<void>-

nz-list[nzGrid]#

Use grid layout for the list.

nz-list-header#

Header component for the list.

nz-list-footer#

Footer component for the list.

nz-list-pagination#

Pagination component for the list.

nz-list-load-more#

Load more component for the list.


nz-list-item#

PropertyDescriptionTypeDefault
[nzNoFlex]Whether it's not flex layout renderingbooleanfalse

ul[nz-list-item-actions]#

Actions container component for the list items.

nz-list-item-action#

Action component for the list items.

nz-list-item-extra#

Extra content for the list items.


nz-list-item-meta#

PropertyDescriptionTypeDefault
[nzAvatar]The avatar of list itemstring | TemplateRef<void>-
[nzDescription]The description of list itemstring | TemplateRef<void>-
[nzTitle]The title of list itemstring | TemplateRef<void>-

nz-list-item-meta-title#

Title component for the list items meta part.

nz-list-item-meta-description#

Description component for the list items meta part.

nz-list-item-meta-avatar#

Avatar component for the list items meta part.

PropertyDescriptionTypeDefaultGlobal Config
[nzSrc]The address of the image for an image avatarstring-