iter(g311): 骨架文本行高对齐正文行盒
This commit is contained in:
@@ -3185,6 +3185,15 @@
|
||||
"motivation": "多选下拉只能逐项点或按退格删标签,选项一多就是体力活;transfer 早就有三态全选框,multiSelect 这个更常用的组件反而没有,用户只能「先搜再一个个点」。",
|
||||
"acceptance": "① 新增 selectAll 入参:弹层顶部一行「全选(已选/可选)」,全选 ✓、部分选中显 –、再点即清空这批;② 只作用于当前过滤结果,先搜再全选=按条件批量选;③ 到 max 时补满即停,不静默超选;④ 键盘可达:全选行占 active -1 号位,↑↓ 能走到、Enter 触发;⑤ manifest 参数表与手把手、demo 同步,npm run check 全绿。",
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "g311",
|
||||
"domain": "visual",
|
||||
"status": "open",
|
||||
"title": "骨架文本行高对齐正文:加载完成时表格不再窜一下",
|
||||
"motivation": ".ua-skeleton-text 写死 height: 12px,而表格单元格里的正文行盒是「13px 字号 × 1.55 行高 ≈ 20px」——骨架行比真实行矮 8px,五行就差 40px,dataTable 从骨架切到数据时整表高度突跳,比没有加载态更晃眼。",
|
||||
"acceptance": "① .ua-skeleton-text 的高度改成 calc(正文字号 × 正文档行高),与真实文字行盒等高;② 同时消掉这处 12px 字面值;③ skeleton 手把手补一条说明为什么按行盒算;④ audit:visual / audit:motion 全绿,npm run check 通过。",
|
||||
"notes": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+3
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-26T16:40:39.175Z",
|
||||
"generatedAt": "2026-10-26T16:41:28.122Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -1236,7 +1236,8 @@
|
||||
"数据加载期间用 skeleton 顶替真实内容,加载完成后整体替换",
|
||||
"文本段落用 variant: 'text' + rows 控制行数,头像用 'circle',卡片/图片区域用 'rect'",
|
||||
"占位块自带扫光动画,reduced-motion 用户自动静态化为纯灰块",
|
||||
"组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器"
|
||||
"组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器",
|
||||
"行高按「正文字号 × 正文档行高」算,与真实文字行盒等高:表格 / 列表的加载态换成数据时不会整体窜一下(历史写死 12px,比正文矮约 8px,五行就差 40px)"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
+2
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T16:40:39.175Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T16:41:28.122Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -578,6 +578,7 @@ skeleton({ variant: 'text', rows: 3 }); skeleton({ variant: 'circle' }); skeleto
|
||||
2. 文本段落用 variant: 'text' + rows 控制行数,头像用 'circle',卡片/图片区域用 'rect'
|
||||
3. 占位块自带扫光动画,reduced-motion 用户自动静态化为纯灰块
|
||||
4. 组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器
|
||||
5. 行高按「正文字号 × 正文档行高」算,与真实文字行盒等高:表格 / 列表的加载态换成数据时不会整体窜一下(历史写死 12px,比正文矮约 8px,五行就差 40px)
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-skeleton
|
||||
|
||||
|
||||
@@ -1107,7 +1107,8 @@
|
||||
"数据加载期间用 skeleton 顶替真实内容,加载完成后整体替换",
|
||||
"文本段落用 variant: 'text' + rows 控制行数,头像用 'circle',卡片/图片区域用 'rect'",
|
||||
"占位块自带扫光动画,reduced-motion 用户自动静态化为纯灰块",
|
||||
"组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器"
|
||||
"组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器",
|
||||
"行高按「正文字号 × 正文档行高」算,与真实文字行盒等高:表格 / 列表的加载态换成数据时不会整体窜一下(历史写死 12px,比正文矮约 8px,五行就差 40px)"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1499,7 +1499,7 @@ button.ua-step-dot:hover {
|
||||
}
|
||||
}
|
||||
.ua-skeleton-text {
|
||||
height: 12px;
|
||||
height: calc(var(--ua-font-size-md) * var(--ua-leading-normal)); /* 与真实正文行盒同高:原先写死 12px,比正文矮约 8px,表格加载完会整体窜一下 */
|
||||
margin-bottom: var(--ua-space-2);
|
||||
}
|
||||
.ua-skeleton-text.ua-last {
|
||||
|
||||
Reference in New Issue
Block a user