List
List
Basic list display, which can carry text, lists, pictures, paragraphs.
가져오기import{ List }from"antd"; |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
가져오기import{ List }from"antd"; |
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 | - |
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| avatarMarginRight | 头像右间距 | undefined | MarginRight<string | number> | 16 |
| contentWidth | 内容宽度 | string | number | 220 |
| descriptionFontSize | 描述文字大小 | number | 14 |
| emptyTextPadding | 空文本内边距 | undefined | Padding<string | number> | 16 |
| footerBg | 底部区域背景色 | string | transparent |
| headerBg | 头部区域背景色 | string | transparent |
| itemPadding | 列表项内间距 | string | 12px 0 |
| itemPaddingLG | 大号列表项内间距 | string | 16px 24px |
| itemPaddingSM | 小号列表项内间距 | string | 8px 16px |
| metaMarginBottom | Meta 下间距 | undefined | MarginBottom<string | number> | 16 |
| titleMarginBottom | 标题下间距 | undefined | MarginBottom<string | number> | 12 |
