iter(g24): 新增 list 列表组件(含空状态回落与可点击条目)

This commit is contained in:
HIsheR
2026-10-26 11:33:27 +08:00
parent 2b65922c7e
commit e6b4a84085
13 changed files with 297 additions and 9 deletions
+49 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T03:31:05.626Z",
"generatedAt": "2026-10-26T03:33:14.774Z",
"repoRoot": ".",
"packages": [
{
@@ -181,7 +181,8 @@
"timeline(props):时间线,items 按序渲染纵向事件流(标题 / 时间 / 正文 + 语义色节点),mode 控制轴线左右,pending 追加进行中节点",
"segmented(props):分段控制器,胶囊分段 + 滑动滑块,value 信号双向绑定,←→ 环形导航,整组或单项可禁用",
"descriptions(props):描述列表,items(label/value/span) 铺进 column 列网格,bordered 切表格形态,窄屏自动单列",
"statistic(props):统计数值,标题 + 大号数字 + 前后缀 + 环比趋势,value 变化时 rAF 滚动过渡(400ms easeOutCubic),减弱动效偏好下直落终值"
"statistic(props):统计数值,标题 + 大号数字 + 前后缀 + 环比趋势,value 变化时 rAF 滚动过渡(400ms easeOutCubic),减弱动效偏好下直落终值",
"list(props):列表,header/footer 外壳 + 条目 avatar/title/description/extra,onItemClick 让条目可点击,items 为空回落空状态"
],
"keyTypes": [
"ButtonProps",
@@ -1762,6 +1763,52 @@
"多条指标并排时用 descriptions 或 flex 容器排列,本组件不自带网格",
"用户开启「减弱动效」时组件直接落终值,无需调用方判断"
]
},
{
"id": "list",
"title": "列表 List",
"demo": "sec-list",
"props": [
{
"n": "items",
"t": "ListItem[]",
"r": 1,
"d": "条目列表,每项 { title, description?, avatar?, extra? }"
},
{
"n": "header",
"t": "string",
"d": "列表头标题;缺省不渲染"
},
{
"n": "footer",
"t": "string",
"d": "列表尾说明;缺省不渲染"
},
{
"n": "bordered",
"t": "boolean",
"d": "是否带外边框与分隔线;缺省 false"
},
{
"n": "emptyText",
"t": "string",
"d": "无数据占位文案;缺省「暂无数据」"
},
{
"n": "onItemClick",
"t": "(item: ListItem, index: number) => void",
"k": 1,
"d": "条目点击回调;提供后条目可点击并带 hover 反馈"
}
],
"example": "list({ header: '待办', bordered: true, items: [{ title: '报销单 RB-2048', description: '等待复核', avatar: avatar({ name: '王' }) }], onItemClick: (item) => console.log(item.title) })",
"steps": [
"准备 items 数组,每项至少给 title,description 作次要说明",
"avatar 传头像组件(如 avatar({ name }))、extra 传右侧附加(如 tag(...)),不传该侧不留位",
"需要点击时传 onItemClick(item, index),条目自动加 hover 底色;bordered: true 给外边框与分隔线",
"items 为空数组时自动渲染 empty 占位,文案可用 emptyText 覆盖"
]
}
]
},