80 lines
3.6 KiB
JSON
80 lines
3.6 KiB
JSON
{
|
||
"slug": "loadingoverlay",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生加载遮罩：is-inline 与 is-dark 两种形态，靠 display 切换显隐。",
|
||
"usage": [
|
||
"两个遮罩共用一套类名：.kole-loading-overlay 叠 is-inline（局部）或 is-dark（全屏），各自带 id 给脚本用。",
|
||
"内部结构固定为 .kole-loading-spinner 加 .kole-loading-text，文案写在文本节点里（示例「加载中…」「正在提交，请稍候」）。",
|
||
"切换函数按 id 直接改 display：toggleFull 与 toggleInline 都是 e.style.display = e.style.display === \"none\" ? \"flex\" : \"none\"。",
|
||
"初始态写在 HTML 上（style=\"display:none\"），脚本只负责反转，不从别处读状态。",
|
||
"局部遮罩放在 .kole-box 内部，说明它需要外层有相对定位的容器，否则会铺满视口。"
|
||
],
|
||
"bestPractices": [
|
||
"显隐状态存在内联 display 上，外部（例如请求结束）要关闭需自己拿到元素改 display，没有公开的开关函数。",
|
||
"两个函数按固定 id 取元素，改 id 会静默失效。",
|
||
"全屏遮罩没有锁滚动，请求期间用户仍能滚动背景内容。"
|
||
],
|
||
"a11y": [
|
||
"遮罩与内部 spinner、文本都写了 role=\"status\" 与 aria-busy=\"true\"，状态语义方向正确但 role 重复声明在多个层级。",
|
||
"role=\"status\" 是 live region，隐藏时（display:none）不会播报，需要改为插入时播报或直接展示可见文本。",
|
||
"没有 aria-live=\"polite\" 之外的进度信息，长耗时操作里读屏只能听到「正在提交，请稍候」。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端用类名表达两种形态：.kole-loading-overlay 叠 is-inline 或 is-dark，内部是 -spinner 与 -text，显隐由页内两个 toggle 函数改写内联 display，没有 props 也没有 data-* 钩子。",
|
||
"table": [
|
||
{
|
||
"name": "is-dark",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/LoadingOverlay.html:25）。"
|
||
},
|
||
{
|
||
"name": "is-inline",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/LoadingOverlay.html:19）。"
|
||
},
|
||
{
|
||
"name": "kole-box",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/LoadingOverlay.html:11）。"
|
||
},
|
||
{
|
||
"name": "kole-loading-overlay",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/LoadingOverlay.html:19）。"
|
||
},
|
||
{
|
||
"name": "kole-loading-spinner",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/LoadingOverlay.html:20）。"
|
||
},
|
||
{
|
||
"name": "kole-loading-text",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/LoadingOverlay.html:21）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/LoadingOverlay.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/LoadingOverlay.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"loadingoverlay-ex-1"
|
||
],
|
||
"notes": [
|
||
"局部遮罩与 is-inline 见（frameworks/LoadingOverlay.html:19），全屏与 is-dark 见（frameworks/LoadingOverlay.html:25）。",
|
||
"两个切换函数按 id 操作 display 见（frameworks/LoadingOverlay.html:31-32）。",
|
||
"role 与 aria-busy 的重复声明见（frameworks/LoadingOverlay.html:19-21）与（frameworks/LoadingOverlay.html:26-27）。"
|
||
]
|
||
}
|