使用import { List } from 'antd'; |
最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
List 组件已经进入废弃阶段，将于下个 major 版本移除。
通用属性参考：通用属性
另外我们封装了 ProList，在 antd List 之上扩展了更多便捷易用的功能，比如多选，展开等功能，使用体验贴近 Table，欢迎尝试使用。
| 参数 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| 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: T, index: number) => ReactNode | - | × | |
| rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式 | keyof T | (item: T) => React.Key | "key" | × | |
| size | list 的尺寸 | default | large | small | default | × | |
| split | 是否展示分割线 | boolean | true | × |
分页的配置项。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| position | 指定分页显示的位置 | top | bottom | both | bottom |
| align | 指定分页对齐的位置 | start | center | end | end |
更多配置项，请查看 Pagination。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| column | 列数 | number | - | |
| gutter | 栅格间隔 | number | 0 | |
| xs | <576px 展示的列数 | number | - | |
| sm | ≥576px 展示的列数 | number | - | |
| md | ≥768px 展示的列数 | number | - | |
| lg | ≥992px 展示的列数 | number | - | |
| xl | ≥1200px 展示的列数 | number | - | |
| xxl | ≥1600px 展示的列数 | number | - | |
| xxxl | ≥1920px 展示的列数 | number | - | 6.3.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| actions | 列表操作组，根据 itemLayout 的不同，位置在卡片底部或者最右侧 | Array<ReactNode> | - | × | |
| classNames | 语义化结构 className | Record<actions | extra, string> | - | 5.18.0 | 5.18.0 |
| extra | 额外内容，通常用在 itemLayout 为 vertical 的情况下，展示右侧内容; horizontal 展示在列表元素最右侧 | ReactNode | - | × | |
| styles | 语义化结构 style | Record<actions | extra, CSSProperties> | - | 5.18.0 | 5.18.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| avatar | 列表元素的图标 | ReactNode | - | |
| description | 列表元素的描述内容 | ReactNode | - | |
| title | 列表元素的标题 | ReactNode | - |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| avatarMarginRight | 头像右间距 | MarginRight<string | number> | undefined | 16 |
| contentWidth | 内容宽度 | string | number | 220 |
| descriptionFontSize | 描述文字大小 | number | 14 |
| emptyTextPadding | 空文本内边距 | Padding<string | number> | undefined | 16 |
| footerBg | 底部区域背景色 | string | transparent |
| headerBg | 头部区域背景色 | string | transparent |
| itemPadding | 列表项内间距 | string | 12px 0 |
| itemPaddingLG | 大号列表项内间距 | string | 16px 24px |
| itemPaddingSM | 小号列表项内间距 | string | 8px 16px |
| metaMarginBottom | Meta 下间距 | MarginBottom<string | number> | undefined | 16 |
| titleMarginBottom | 标题下间距 | MarginBottom<string | number> | undefined | 12 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBorder | 默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。 | string | #d9d9d9 |
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorSplit | 用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。 | string | rgba(5,5,5,0.06) |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| colorTextDescription | 控制文本描述字体颜色。 | string | rgba(0,0,0,0.45) |
| colorTextDisabled | 控制禁用状态下的字体颜色。 | string | rgba(0,0,0,0.25) |
| borderRadiusLG | LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。 | number | 8 |
| controlHeight | Ant Design 中按钮和输入框等基础控件的高度 | number | 32 |
| controlHeightLG | 较高的组件高度 | number | 40 |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | 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 | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| fontSizeLG | 大号字体大小 | number | 16 |
| fontSizeSM | 小号字体大小 | number | 12 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| lineHeightLG | 大型文本行高 | number | 1.5 |
| lineType | 用于控制组件边框、分割线等的样式，默认是实线 | string | solid |
| lineWidth | 用于控制组件边框、分割线等的宽度 | number | 1 |
| margin | 控制元素外边距，中等尺寸。 | number | 16 |
| marginLG | 控制元素外边距，大尺寸。 | number | 24 |
| marginSM | 控制元素外边距，中小尺寸。 | number | 12 |
| marginXXL | 控制元素外边距，最大尺寸。 | number | 48 |
| marginXXS | 控制元素外边距，最小尺寸。 | number | 4 |
| motionDurationSlow | 动效播放速度，慢速。用于大型元素如面板动画交互 | string | 0.3s |
| padding | 控制元素的内间距。 | number | 16 |
| paddingLG | 控制元素的大内间距。 | number | 24 |
| paddingSM | 控制元素的小内间距。 | number | 12 |
| paddingXS | 控制元素的特小内间距。 | number | 8 |
| screenMD | 控制中等屏幕的屏幕宽度。 | number | 768 |
| screenSM | 控制小屏幕的屏幕宽度。 | number | 576 |
在 Ant Design v6 中，我们将推出一个全新的 Listy 组件作为 List 的继任者。
Listy 内置虚拟滚动能力，并更加强调灵活的布局控制，旨在帮助开发者根据不同业务场景更高效地实现自定义列表。
目前，底层实现 rc-listy 已基本开发完成，正在等待核心维护者的评审与后续调整。
Ant Design v6 将基于 rc-listy 正式提供 Listy 组件。
相关链接：