mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
882cec62d6
* docs: Add components overview page * fix detail * remove ContributorsList form overview page * fix components url * improve code style * remove extra file * fix detail * fix lint * fix lint * docs: Finish components overview page * fix lint * docs: Update cover * fix lint * update cover * update menu * improve overview page * refactor code * fix order * update title * add components count * fix overview page ssr bug * move less file * update title margin Co-authored-by: arvinxx <arvinx@foxmail.com>
3.8 KiB
3.8 KiB
category | type | title | cols | cover |
---|---|---|---|---|
Components | Data Display | List | 1 | https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg |
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.
API
List
Property | Description | Type | Default | Version |
---|---|---|---|---|
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} | object | - | |
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 | boolean|SpinProps (more) | false | |
loadMore | Shows a load more content | string|ReactNode | - | |
locale | 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
Properties for pagination.
Property | Description | Type | Default |
---|---|---|---|
position | specify the position of Pagination |
top | bottom | both |
bottom |
More about pagination, please check Pagination
.
List grid props
Property | Description | Type | Default | Version |
---|---|---|---|---|
column | column of grid | number | - | |
gutter | 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 | - | |
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 | Version |
---|---|---|---|---|
avatar | The avatar of list item | ReactNode | - | |
description | The description of list item | string|ReactNode | - | |
title | The title of list item | string|ReactNode | - |