Responsive grid list

Infinite & virtualized

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.

edit

Japanese princess to wed commoner.

edit

Australian walks 100km after outback crash.

edit

Man charged over missing wedding girl.

edit

Los Angeles battles huge wildfires.

edit

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.

      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.

      Loading...

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

Burke

content

edit
more

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

Freitas

content

edit
more

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

Niemi

content

edit
more

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

Mendes

content

edit
more

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

Sheikh

content

edit
more

Load more list with loadMore property.

      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

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

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

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

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

Setting nzItemLayout property with vertical to create a vertical list.

      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.

      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

Responsive grid list.

      Loading...

Infinite & virtualized

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.

      Loading...

API#

nz-listcomponentstandalone#

Property	Description	Type	Default
`[nzBordered]`	Toggles rendering of the border around the list	`boolean`	`false`
`[nzFooter]`	List footer renderer	`string \| TemplateRef<void>`	-
`[nzHeader]`	List header renderer	`string \| 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 fetched	`boolean`	`false`
`[nzSize]`	Size of list	`'large' \| 'small' \| 'default'`	`'default'`
`[nzSplit]`	Toggles rendering of the split under the list item	`boolean`	`true`

nz-list-emptycomponentstandalone#

Empty content component for the list.

Property	Description	Type	Default
`[nzNoResult]`	Empty content	`string \| TemplateRef<void>`	-

nz-list[nzGrid]componentstandalone#

Use grid layout for the list.

nz-list-headercomponentstandalone#

Header component for the list.

nz-list-footercomponentstandalone#

Footer component for the list.

nz-list-paginationcomponentstandalone#

Pagination component for the list.

nz-list-load-morecomponentstandalone#

Load more component for the list.

nz-list-itemcomponentstandalone#

Property	Description	Type	Default
`[nzNoFlex]`	Whether it's not `flex` layout rendering	`boolean`	`false`

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

Property	Description	Type	Default
`[nzAvatar]`	The avatar of list item	`string \| TemplateRef<void>`	-
`[nzDescription]`	The description of list item	`string \| TemplateRef<void>`	-
`[nzTitle]`	The title of list item	`string \| 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.

Property	Description	Type	Default	Global Config
`[nzSrc]`	The address of the image for an image avatar	`string`	-