Search
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.
Simple list
A Simple list containing content. Supports default, small and large size.
- Default size list
- Default size list
- Default size list
- Default size list
- Default size list
- Large size list
- Large size list
- Large size list
- Large size list
- Large size list
- Small size list
- Small size list
- Small size list
- Small size list
- Small size list
Basic list
Basic list.
Load more
Load more list with loadMore property.
Vertical
Set the itemLayout property to vertical to create a vertical list.
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create
Grid
Create a grid layout by setting the grid property of List.
Responsive grid list
Responsive grid list. The size property the is as same as Layout Grid
Scrolling loaded
Infinite & virtualized
An example of infinite list & virtualized loading using . .
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
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
API
List
| Property | Description | Type | Default |
|---|---|---|---|
bordered | Toggles rendering of the border around the list | boolean | false |
footer | List footer renderer | string | ReactNode | - |
grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | - | |
header | List header renderer | string | ReactNode | - |
itemLayout | The layout of list, default is horizontal, If a vertical list is desired, set the itemLayout property to vertical | string | - |
rowKey | Item`s unique key, could be a string or function that returns a string | string | Function(record): string | key |
loading | Shows a loading indicator while the contents of the list are being fetched | false | |
loadMore | Shows a load more content | string | 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 |
size | Size of list | default | large | small | default |
split | Toggles rendering of the split under the list item | boolean | true |
dataSource | DataSource array for list | any[] | - |
renderItem | Customize list item when using dataSource | (item) => ReactNode | - |
pagination
| Property | Description | Type | Default |
|---|---|---|---|
position | The specify the position of Pagination | top | bottom | both | bottom |
List grid props
| Property | Description | Type | Default |
|---|---|---|---|
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 |
|---|---|---|---|
actions | The actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far right | Array | - |
extra | The extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far right | string | ReactNode | - |
List.Item.Meta
| Property | Description | Type | Default |
|---|---|---|---|
avatar | The avatar of list item | ReactNode | - |
description | The description of list item | string | ReactNode | - |
title | The title of list item | string | ReactNode | - |