List
List
Basic list display, which can carry text, lists, pictures, paragraphs.
Importimport{ List }from"antd"; |
Sourcecomponents/list |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport{ List }from"antd"; |
Sourcecomponents/list |
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.
Common props ref：Common props
| 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 |
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.
| 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 | - |
| 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> | - | |
| classNames | Semantic structure className | Record<actions | extra, string> | - | 5.18.0 |
| extra | The extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far right | ReactNode | - | |
| styles | Semantic DOM style | Record<actions | extra, CSSProperties> | - | 5.18.0 |
| 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 | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| avatarMarginRight | Right margin of avatar | undefined | MarginRight<string | number> | 16 |
| contentWidth | Width of content | string | number | 220 |
| descriptionFontSize | Font size of description | number | 14 |
| emptyTextPadding | Padding of empty text | undefined | Padding<string | number> | 16 |
| footerBg | Background color of footer | string | transparent |
| headerBg | Background color of header | string | transparent |
| itemPadding | Padding of item | string | 12px 0 |
| itemPaddingLG | Padding of large item | string | 16px 24px |
| itemPaddingSM | Padding of small item | string | 8px 16px |
| metaMarginBottom | Margin bottom of meta | undefined | MarginBottom<string | number> | 16 |
| titleMarginBottom | Margin bottom of title | undefined | MarginBottom<string | number> | 12 |
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 header and footer of list by setting header and footer property.
Basic list.
Load more list with loadMore property.
Set the itemLayout property to vertical to create a vertical list.
List pagination can be used and set through the pagination property.
Create a grid layout by setting the grid property of List.
Test List grid for some edge cases.
Responsive grid list. The size property the is as same as Layout Grid.
The example of infinite load with react-infinite-scroll-component.
An example of infinite & virtualized list via using rc-virtual-list.
Custom component token.
