ant-design/components/list/index.en-US.md
MadCcc e7edfa42d7
docs: update overview img (#38946)
* docs: update overview img

* chore: code clean

* chore: code clean

* chore: update

* chore: code clean
2022-11-30 20:14:41 +08:00

4.3 KiB

category group title cover demo
Components Data Display List https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original
cols
2

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.

Examples

Simple list Basic list Load more Vertical Grid Test Grid Responsive grid list Scrolling loaded virtual list

API

List

Property Description Type Default Version
bordered Toggles rendering of the border around the list boolean false
dataSource DataSource array for list any[] -
footer List footer renderer ReactNode -
grid The grid type of list. You can set grid to something like {gutter: 16, column: 4} object -
header List header renderer ReactNode -
itemLayout The layout of list horizontal | vertical horizontal
loading Shows a loading indicator while the contents of the list are being fetched boolean | SpinProps (more) false
loadMore Shows a load more content ReactNode -
locale The i18n text including empty text object {emptyText: No Data}
pagination Pagination config, hide it by setting it to false boolean | object false
renderItem Customize list item when using dataSource (item) => ReactNode -
rowKey Item's unique value, could be an Item's key which holds a unique value of type React.Key or function that receives Item and returns a React.Key keyof T | (item: T) => React.Key "key"
size Size of list default | large | small default
split Toggles rendering of the split under the list item boolean true

pagination

Properties for pagination.

Property Description Type Default
position The specify the position of Pagination top | bottom | both bottom

More about pagination, please check Pagination.

List grid props

Property Description Type Default Version
column The column of grid number -
gutter The spacing between grid number 0
xs <576px column of grid number -
sm ≥576px column of grid number -
md ≥768px column of grid number -
lg ≥992px column of grid number -
xl ≥1200px column of grid number -
xxl ≥1600px column of grid number -

List.Item

Property Description Type Default Version
actions The actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far right Array<ReactNode> -
extra The extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far right ReactNode -

List.Item.Meta

Property Description Type Default Version
avatar The avatar of list item ReactNode -
description The description of list item ReactNode -
title The title of list item ReactNode -