iter(g24): 新增 list 列表组件(含空状态回落与可点击条目)
This commit is contained in:
+49
-2
@@ -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 覆盖"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user