List
list数据列表 · 复合 List/ListItem/ListItem.Meta + actions/size/bordered/split/grid + 空态/分页/加载更多(零依赖·复用 Empty/Pagination/Avatar/User)
用法
基础用法
数据驱动：items + renderItem，配 ListItem.Meta 放头像/标题/描述，actions 放右侧操作。
tsx
<List
bordered
items={people}
header={<span>团队成员</span>}
footer={<span>共 {people.length} 人</span>}
renderItem={(p) => (
<ListItem actions={[<Button key="e" variant="ghost" size="sm">编辑</Button>]}>
<ListItem.Meta avatar={<Avatar fallback={p.initials} />} title={p.name} description={p.role} />
</ListItem>
)}
/>无边框 + 无分隔
去掉外框与行分隔线，适合嵌入已有卡片/面板内部。
栅格卡片态
grid 切换为卡片网格（复用 Grid 原语），每张卡片自带边框。
- 陈陈静产品经理
- 李李伟前端工程师
- 王王芳设计师
- 赵赵强后端工程师
tsx
<List
grid={{ cols: 2, gap: 4 }}
items={people}
renderItem={(p) => (
<ListItem actions={[<Button key="v" variant="outline" size="sm">查看</Button>]}>
<User name={p.name} description={p.role} avatarProps={{ fallback: p.initials }} />
</ListItem>
)}
/>空态
items 为空数组时内置 <Empty> 占位。
团队成员
暂无数据
tsx
<List bordered items={[]} header={<span>团队成员</span>} renderItem={(p) => ...} />何时用
渲染同构条目流——团队成员、消息、设置项、资源卡片。带表头列/排序/可编辑用 Table/EditableTable；本组件是更轻的"每行一条 + 头像/标题/描述/操作"垂直列表，开 grid 即变卡片栅格。
导入
ts
import { List, ListItem, ListItemMeta } from "@hulianui/ui"Props
ListProps<T>：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items | T[] | — | 数据数组(数据驱动模式，配合 renderItem) |
| size | "sm" | "md" | "lg" | "md" | 尺寸(影响行内边距) |
| bordered | boolean | false | 外层边框 + 圆角容器(栅格态下忽略) |
| inset | boolean | 跟随 bordered | 行/头尾插槽水平内边距(与 bordered 解耦)；放进侧栏等已有容器时设 inset 让内容不贴边 |
| split | boolean | true | 行分隔线(栅格态下忽略) |
| grid | boolean | ListGridConfig | — | 栅格卡片态(复用 Grid)；传 true 用默认配置(3 列) |
| loadMore | ListLoadMore | — | 「加载更多」配置(底部按钮 + loading) |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| renderItem | (item: T, index: number) => ReactNode | 渲染函数——渲染每一项；建议返回 <ListItem>。不传则把 item 当 ReactNode 直接渲染 |
| children | ReactNode | 组合模式：直接放 <ListItem> 子元素(与 items 二选一，items 优先) |
| header | ReactNode | 头部插槽 |
| footer | ReactNode | 底部插槽(渲染在最底部) |
| empty | ReactNode | 空态内容(不传用内置 <Empty>) |
| pagination | ReactNode | 分页槽(放 <Pagination>)，渲染在列表下方 |
ListGridConfig：cols(默认 3) / gap(默认 4，×0.25rem) / colGap / rowGap / rowsListLoadMore：onLoadMore* / loading / hasMore(默认 true，false 时不渲染按钮) / text(默认 "加载更多")
ListItemProps：actions?: ReactNode[](行右侧操作区，多项间自动加分隔线) / childrenListItemMetaProps：avatar / title / description
禁忌 / 坑
items与children二选一，同时给则items优先；数据驱动用items + renderItem，静态布局直接放<ListItem>children。grid态下bordered/split被忽略(边框由卡片自带)。ListLoadMore.hasMore=false时整个加载更多按钮不渲染，别等它消失才发现没传完。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<List
size="md"
bordered={true}
split={true}
items={people}
renderItem={(p) => (
<ListItem actions={[<Button variant="ghost" size="sm">编辑</Button>]}>
<ListItem.Meta avatar={<Avatar fallback={p.initials} />} title={p.name} description={p.role} />
</ListItem>
)}
/>