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
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.
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.
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.
- 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
- 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
- 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
Pagination Position:
Pagination Align:
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content
No data
API
Common props ref:Common props
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 |
align | The specify the alignment of Pagination | start | center | end | end |
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 | - |