iter(g99): 加载指示器补可定制播报
This commit is contained in:
@@ -1148,6 +1148,14 @@
|
|||||||
"acceptance": "ModalProps / DrawerProps 新增 closeOnOverlay(缺省 true);传 false 时点遮罩不关闭,× 与 Esc 行为不变;文档参数表与演示(防误关弹窗实例)同步;npm run check 全绿",
|
"acceptance": "ModalProps / DrawerProps 新增 closeOnOverlay(缺省 true);传 false 时点遮罩不关闭,× 与 Esc 行为不变;文档参数表与演示(防误关弹窗实例)同步;npm run check 全绿",
|
||||||
"notes": "自补:可用性;遮罩点击处理改成显式卫语句,语义比一长串 && 更清楚",
|
"notes": "自补:可用性;遮罩点击处理改成显式卫语句,语义比一长串 && 更清楚",
|
||||||
"status": "done"
|
"status": "done"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "g99",
|
||||||
|
"title": "加载指示器补可定制播报文案",
|
||||||
|
"motivation": "spinner 的 aria-label 写死「加载中」,页面里同时有三处加载时读屏念三次一样的话,用户不知道在等什么;组件没有出口让调用方说明加载对象",
|
||||||
|
"acceptance": "SpinnerProps 新增可选 label,缺省仍是「加载中」(不传即旧行为);role=status 保持不变;文档参数与手把手步骤、演示(带 label 的实例)同步;npm run check 全绿",
|
||||||
|
"notes": "自补:无障碍;纯透传一个可选参数,行为向后兼容",
|
||||||
|
"status": "open"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
+8
-2
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"$schema": "ui-arch-registry-index/0.1",
|
"$schema": "ui-arch-registry-index/0.1",
|
||||||
"generatedAt": "2026-10-26T05:15:56.401Z",
|
"generatedAt": "2026-10-26T05:16:55.417Z",
|
||||||
"repoRoot": ".",
|
"repoRoot": ".",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
@@ -1248,13 +1248,19 @@
|
|||||||
"t": "number",
|
"t": "number",
|
||||||
"d": "直径像素;缺省 18",
|
"d": "直径像素;缺省 18",
|
||||||
"df": "18"
|
"df": "18"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"n": "label",
|
||||||
|
"t": "string",
|
||||||
|
"d": "读屏播报文案,如「正在加载订单」;缺省「加载中」"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"example": "spinner(); spinner({ size: 26 })",
|
"example": "spinner(); spinner({ size: 26 })",
|
||||||
"steps": [
|
"steps": [
|
||||||
"数据加载时插入 spinner(),加载完成移除",
|
"数据加载时插入 spinner(),加载完成移除",
|
||||||
"用 size 匹配上下文尺寸(按钮内用小号,整页 loading 用大号)",
|
"用 size 匹配上下文尺寸(按钮内用小号,整页 loading 用大号)",
|
||||||
"与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner"
|
"与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner",
|
||||||
|
"区块级加载给 spinner 传 label 说明在加载什么,读屏才不会只念一句「加载中」"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
+1
-1
@@ -375,7 +375,7 @@ const content = h(
|
|||||||
badge({ dot: true, label: '有未读消息' }),
|
badge({ dot: true, label: '有未读消息' }),
|
||||||
alert({ message: '信息提示:这是一条 info 提示条。' }),
|
alert({ message: '信息提示:这是一条 info 提示条。' }),
|
||||||
alert({ message: '警告提示:操作可能存在风险。', variant: 'warning' }),
|
alert({ message: '警告提示:操作可能存在风险。', variant: 'warning' }),
|
||||||
h('div', { class: 'row' }, spinner(), spinner({ size: 26 })),
|
h('div', { class: 'row' }, spinner(), spinner({ size: 26 }), spinner({ size: 22, label: '正在加载订单列表' })),
|
||||||
progress({ value: percent, label: '上传进度' }),
|
progress({ value: percent, label: '上传进度' }),
|
||||||
h('div', { class: 'row' }, h('span', { class: 'out' }, '语义色:'), progress({ value: percent, variant: 'danger', label: '同步失败重试进度' })),
|
h('div', { class: 'row' }, h('span', { class: 'out' }, '语义色:'), progress({ value: percent, variant: 'danger', label: '同步失败重试进度' })),
|
||||||
h('div', { class: 'row' }, h('span', { class: 'out' }, '不确定态:'), progress({ label: '正在连接' })),
|
h('div', { class: 'row' }, h('span', { class: 'out' }, '不确定态:'), progress({ label: '正在连接' })),
|
||||||
|
|||||||
+3
-1
@@ -1,6 +1,6 @@
|
|||||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||||
|
|
||||||
> 自动生成于 2026-10-26T05:15:56.401Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
> 自动生成于 2026-10-26T05:16:55.417Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||||
|
|
||||||
## 快速上手
|
## 快速上手
|
||||||
@@ -628,6 +628,7 @@ popover({ title: '筛选条件', content: h('div', null, '任意可交互内容'
|
|||||||
参数:
|
参数:
|
||||||
|
|
||||||
- size(默认 18):number —— 直径像素;缺省 18
|
- size(默认 18):number —— 直径像素;缺省 18
|
||||||
|
- label:string —— 读屏播报文案,如「正在加载订单」;缺省「加载中」
|
||||||
|
|
||||||
示例:
|
示例:
|
||||||
|
|
||||||
@@ -640,6 +641,7 @@ spinner(); spinner({ size: 26 })
|
|||||||
1. 数据加载时插入 spinner(),加载完成移除
|
1. 数据加载时插入 spinner(),加载完成移除
|
||||||
2. 用 size 匹配上下文尺寸(按钮内用小号,整页 loading 用大号)
|
2. 用 size 匹配上下文尺寸(按钮内用小号,整页 loading 用大号)
|
||||||
3. 与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner
|
3. 与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner
|
||||||
|
4. 区块级加载给 spinner 传 label 说明在加载什么,读屏才不会只念一句「加载中」
|
||||||
|
|
||||||
现场演示:apps/docs/demo.html#sec-feedback
|
现场演示:apps/docs/demo.html#sec-feedback
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import type { SpinnerProps } from './types.js';
|
|||||||
/*** 加载指示器:纯 CSS 旋转动画,size 控制直径 ***/
|
/*** 加载指示器:纯 CSS 旋转动画,size 控制直径 ***/
|
||||||
export function spinner(props: SpinnerProps = {}): HTMLElement {
|
export function spinner(props: SpinnerProps = {}): HTMLElement {
|
||||||
const size = `${props.size ?? 18}px`;
|
const size = `${props.size ?? 18}px`;
|
||||||
const el = h('span', { class: 'ua-spinner', role: 'status', 'aria-label': '加载中' }); // 读屏播报加载状态
|
const el = h('span', { class: 'ua-spinner', role: 'status', 'aria-label': props.label ?? '加载中' }); // 读屏播报加载状态,label 可写明在加载什么
|
||||||
el.style.width = size;
|
el.style.width = size;
|
||||||
el.style.height = size;
|
el.style.height = size;
|
||||||
return el;
|
return el;
|
||||||
|
|||||||
@@ -313,6 +313,7 @@ export interface ToastProps {
|
|||||||
/*** 加载指示器入参 ***/
|
/*** 加载指示器入参 ***/
|
||||||
export interface SpinnerProps {
|
export interface SpinnerProps {
|
||||||
size?: number; // 直径像素;缺省 18
|
size?: number; // 直径像素;缺省 18
|
||||||
|
label?: string; // 读屏播报文案,如「正在加载订单」;缺省「加载中」
|
||||||
}
|
}
|
||||||
|
|
||||||
/*** 进度条入参 ***/
|
/*** 进度条入参 ***/
|
||||||
|
|||||||
@@ -1119,13 +1119,19 @@
|
|||||||
"t": "number",
|
"t": "number",
|
||||||
"d": "直径像素;缺省 18",
|
"d": "直径像素;缺省 18",
|
||||||
"df": "18"
|
"df": "18"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"n": "label",
|
||||||
|
"t": "string",
|
||||||
|
"d": "读屏播报文案,如「正在加载订单」;缺省「加载中」"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"example": "spinner(); spinner({ size: 26 })",
|
"example": "spinner(); spinner({ size: 26 })",
|
||||||
"steps": [
|
"steps": [
|
||||||
"数据加载时插入 spinner(),加载完成移除",
|
"数据加载时插入 spinner(),加载完成移除",
|
||||||
"用 size 匹配上下文尺寸(按钮内用小号,整页 loading 用大号)",
|
"用 size 匹配上下文尺寸(按钮内用小号,整页 loading 用大号)",
|
||||||
"与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner"
|
"与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner",
|
||||||
|
"区块级加载给 spinner 传 label 说明在加载什么,读屏才不会只念一句「加载中」"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user