--- title: List - 列表 path: /list nav: order: 1 title: 桌面组件 path: /design group: order: 4 title: 数据展示 path: /dataShow --- 列表用一个连续的列来显示多行元素，常用于具有相同构成及内容的模块批量展示，可承载多样化的信息内容，从纯文字到复杂的图文组合。 ## 基础文字列表 仅包含简单文字的列表。对较简单的信息进行陈列时使用。 ## 多行文字列表 仅包含主要文字及描述性文字的列表。对较复杂的，包含多个字段或内容的信息进行展示时使用。 ## 基础图文列表 包含简单图文的列表。需使用图片和文字结合展示信息。 ## 带操作列表 包含操作的列表。需要对所在列进行操作时使用。 ## API | 参数 | 说明 | 类型 | 默认值 | 版本 | | ---------- | ------------------------------------------------------------------- | --------------------------------- | ----------------------- | ---- | | 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 \| boject | 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 | | ## paginatin 分页配置项 | 参数 | 说明 | 类型 | 默认值 | 版本 | | ---------- | ------------------ | --------------------- | ------ | ---- | | pagination | 指定分页显示的位置 | top \| bottom \| both | bottom | | 更多配置,请查看 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` | - | | | extra | 额外内容, 通常用在 itemLayout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧 | ReactNode | - | | ## List.Item.Meta | 参数 | 说明 | 类型 | 默认值 | 版本 | | ----------- | ------------------ | --------- | ------ | ---- | | avatar | 列表元素的图标 | ReactNode | - | | | description | 列表元素的描述内容 | ReactNode | - | | | title | 列表元素的标题 | ReactNode | - | |