List列表
List
列表
最基础的列表展示，可承载文字、列表、图片、段落。
使用import{ List }from"antd"; |
何时使用
最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
代码演示
Default Size
Header
- [ITEM] Racing car sprays burning fuel into crowd.
- [ITEM] Japanese princess to wed commoner.
- [ITEM] Australian walks 100km after outback crash.
- [ITEM] Man charged over missing wedding girl.
- [ITEM] Los Angeles battles huge wildfires.
Small Size
Header
- Racing car sprays burning fuel into crowd.
- Japanese princess to wed commoner.
- Australian walks 100km after outback crash.
- Man charged over missing wedding girl.
- Los Angeles battles huge wildfires.
Large Size
Header
- Racing car sprays burning fuel into crowd.
- Japanese princess to wed commoner.
- Australian walks 100km after outback crash.
- Man charged over missing wedding girl.
- Los Angeles battles huge wildfires.
列表拥有大、中、小三种尺寸。
通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。
可通过设置 header 和 footer，来自定义列表头部和尾部。
基础列表。
可通过 loadMore 属性实现加载更多功能。
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2
通过设置 itemLayout 属性为 vertical 可实现竖排列表样式。
Pagination Position:
Pagination Align:
可通过 pagination 属性使用列表分页，并进行设置。
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
可以通过设置 List 的 grid 属性来实现栅格列表，column 可设置期望显示的列数。
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content
响应式的栅格列表。尺寸与 Layout Grid 保持一致。
暂无数据
结合 react-infinite-scroll-component 实现滚动自动加载列表。
结合 rc-virtual-list 实现滚动加载无限长列表，能够提高数据量大时候长列表的性能。
API
通用属性参考：通用属性
另外我们封装了 ProList，在 antd List 之上扩展了更多便捷易用的功能，比如多选，展开等功能，使用体验贴近 Table，欢迎尝试使用。
List
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| bordered | 是否展示边框 | boolean | false | |
| dataSource | 列表数据源 | any[] | - | |
| footer | 列表底部 | ReactNode | - | |
| grid | 列表栅格配置 | object | - | |
| header | 列表头部 | ReactNode | - | |
| itemLayout | 设置 List.Item 布局，设置成 vertical 则竖直样式显示，默认横排 | string | - | |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | object (更多) | false | |
| loadMore | 加载更多 | ReactNode | - | |
| locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: 暂无数据} | |
| pagination | 对应的 pagination 配置，设置 false 不显示 | boolean | object | false | |
| renderItem | 当使用 dataSource 时，可以用 renderItem 自定义渲染列表项 | (item) => ReactNode | - | |
| rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式 | keyof T | (item: T) => React.Key | "key" | |
| size | list 的尺寸 | default | large | small | default | |
| split | 是否展示分割线 | boolean | true |
pagination
分页的配置项。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| position | 指定分页显示的位置 | top | bottom | both | bottom |
| align | 指定分页对齐的位置 | start | center | end | end |
更多配置项，请查看 Pagination。
List grid props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| column | 列数 | number | - | |
| gutter | 栅格间隔 | number | 0 | |
| xs | <576px 展示的列数 | number | - | |
| sm | ≥576px 展示的列数 | number | - | |
| md | ≥768px 展示的列数 | number | - | |
| lg | ≥992px 展示的列数 | number | - | |
| xl | ≥1200px 展示的列数 | number | - | |
| xxl | ≥1600px 展示的列数 | number | - |
List.Item
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| actions | 列表操作组，根据 itemLayout 的不同，位置在卡片底部或者最右侧 | Array<ReactNode> | - | |
| classNames | 语义化结构 className | Record<actions | extra, string> | - | 5.18.0 |
| extra | 额外内容，通常用在 itemLayout 为 vertical 的情况下，展示右侧内容; horizontal 展示在列表元素最右侧 | ReactNode | - | |
| styles | 语义化结构 style | Record<actions | extra, CSSProperties> | - | 5.18.0 |
List.Item.Meta
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| avatar | 列表元素的图标 | ReactNode | - | |
| description | 列表元素的描述内容 | ReactNode | - | |
| title | 列表元素的标题 | ReactNode | - |
Semantic DOM
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2
extra
5.18.0设置额外内容actions
5.18.0设置列表操作组
主题变量（Design Token）
组件 Token如何定制？
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| 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 |