Importimport { List } from 'antd'; |
contributors
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.
List component has been deprecated. Will be removed in the next major version.
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: T, index: number) => 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 | - | |
| xxxl | ≥1920px column of grid | number | - | 6.3.0 |
| 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 | MarginRight<string | number> | undefined | 16 |
| contentWidth | Width of content | string | number | 220 |
| descriptionFontSize | Font size of description | number | 14 |
| emptyTextPadding | Padding of empty text | Padding<string | number> | undefined | 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 | MarginBottom<string | number> | undefined | 16 |
| titleMarginBottom | Margin bottom of title | MarginBottom<string | number> | undefined | 12 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBorder | Default border color, used to separate different elements, such as: form separator, card separator, etc. | string | #d9d9d9 |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDescription | Control the font color of text description. | string | rgba(0,0,0,0.45) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| controlHeight | The height of the basic controls such as buttons and input boxes in Ant Design | number | 32 |
| controlHeightLG | LG component height | number | 40 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeLG | Large font size | number | 16 |
| fontSizeSM | Small font size | number | 12 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightLG | Line height of large text. | number | 1.5 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| margin | Control the margin of an element, with a medium size. | number | 16 |
| marginLG | Control the margin of an element, with a large size. | number | 24 |
| marginSM | Control the margin of an element, with a medium-small size. | number | 12 |
| marginXXL | Control the margin of an element, with the largest size. | number | 48 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| padding | Control the padding of the element. | number | 16 |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingSM | Control the small padding of the element. | number | 12 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
| screenMD | Control the screen width of medium screens. | number | 768 |
| screenSM | Control the screen width of small screens. | number | 576 |
In Ant Design v6, we will introduce a brand-new Listy component as the successor to List.
Listy comes with built-in virtual scrolling and places greater emphasis on flexible layout control, empowering developers to build highly customizable lists tailored to various business scenarios.
The underlying implementation, rc-listy, is already largely complete and is currently awaiting review and further adjustments by core maintainers.
Ant Design v6 will officially provide the Listy component based on rc-listy.
Related links:
