90 lines
3.8 KiB
JSON
90 lines
3.8 KiB
JSON
{
|
|
"slug": "skeletonpro",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生骨架屏：脚本拼一串带 aria-busy 的类名方块，一次性写入容器。",
|
|
"usage": [
|
|
"骨架块由字符串拼装：.kole-skeleton-block（大块）、.kole-skeleton-row（行，内含 .kole-skeleton-avatar 与 .kole-skeleton-lines）、.kole-skeleton-line（单行，宽度用内联 style 百分比）。",
|
|
"每段都带 role=\"status\" 与 aria-busy=\"true\"，语义靠属性而不是类名承载。",
|
|
"行循环是 for (var i = 0; i < 2; i++)，行数写死在脚本里，示例只铺两块。",
|
|
"外层 .kole-skeleton 带 is-active 类（frameworks/SkeletonPro.html:13）驱动闪动动画。",
|
|
"容器是 #app，整串 html 变量拼好后一次 root.innerHTML 写入，没有后续更新。"
|
|
],
|
|
"bestPractices": [
|
|
"骨架块数量与真实内容行数对齐是手工活，行数变化时要同步改那个 for 循环的边界。",
|
|
"宽度用内联百分比表示，换布局时要重新调这些数字，没有自动适配。",
|
|
"加载完成后的替换逻辑不在这段脚本里，需要自己把 #app 的内容换掉。"
|
|
],
|
|
"a11y": [
|
|
"aria-busy=\"true\" 表明内容尚在加载，方向正确；但 role=\"status\" 被重复写在几乎每层节点上，live region 重叠。",
|
|
"骨架块没有文字替代，读屏用户在加载期间得不到「正在加载」的可读文案。",
|
|
"闪动动画没有处理 prefers-reduced-motion。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端是脚本拼类名：.kole-skeleton 外层（is-active 驱动动画）、-block / -row / -avatar / -lines / -line 各部件由页内脚本按字符串拼装写入 #app，加载状态用 role=\"status\" 与 aria-busy 属性表达。",
|
|
"table": [
|
|
{
|
|
"name": "is-active",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/SkeletonPro.html:13）。"
|
|
},
|
|
{
|
|
"name": "kole-card",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/SkeletonPro.html:9）。"
|
|
},
|
|
{
|
|
"name": "kole-skeleton",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/SkeletonPro.html:13）。"
|
|
},
|
|
{
|
|
"name": "kole-skeleton-avatar",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/SkeletonPro.html:19）。"
|
|
},
|
|
{
|
|
"name": "kole-skeleton-block",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/SkeletonPro.html:18）。"
|
|
},
|
|
{
|
|
"name": "kole-skeleton-line",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/SkeletonPro.html:20）。"
|
|
},
|
|
{
|
|
"name": "kole-skeleton-lines",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/SkeletonPro.html:19）。"
|
|
},
|
|
{
|
|
"name": "kole-skeleton-row",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/SkeletonPro.html:19）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/SkeletonPro.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/SkeletonPro.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"skeletonpro-ex-1"
|
|
],
|
|
"notes": [
|
|
"外层与 is-active 见（frameworks/SkeletonPro.html:13）。",
|
|
"骨架块拼装见（frameworks/SkeletonPro.html:18-21），行数循环见（frameworks/SkeletonPro.html:21），写入见（frameworks/SkeletonPro.html:22）。",
|
|
"role / aria-busy 的重复声明见（frameworks/SkeletonPro.html:18-20）。"
|
|
]
|
|
}
|