103 lines
4.2 KiB
JSON
103 lines
4.2 KiB
JSON
{
|
||
"slug": "resultvariants",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生结果页：四个状态各一卡片，内容由脚本按索引写入，图标是字符。",
|
||
"usage": [
|
||
"四张卡片在 HTML 里各是一个 .kole-result，脚本用 forEach 按索引取对应 DATA 项填内容，卡片与数据的对应关系靠顺序。",
|
||
"状态区分靠叠在根上的类：.kole-result 加 is-success / is-error / is-warning / is-info（frameworks/ResultVariants.html:13-16）。",
|
||
"内容结构固定为 -icon（单字符 ✓ ✕ ! i）、-title、-desc、-actions（内含 .kole-result-btn，主按钮叠 primary）与 -extra 补充说明。",
|
||
"两张按钮上写了 role=\"status\"（frameworks/ResultVariants.html:30-31），语义与按钮角色冲突。",
|
||
".kole-result-btn 没有绑定任何 handler，按钮点了不会跳转，示例只负责呈现四种状态。"
|
||
],
|
||
"bestPractices": [
|
||
"卡片的视觉状态来自 HTML 类，文案来自脚本 DATA，改状态时必须两处对齐，只改一处会出现「红色卡片写成功」。",
|
||
"按钮上有误加的 role=\"status\"，接入时删掉，否则读屏不会把它当按钮。",
|
||
"按钮点击没有绑定，要跳转需自己加 handler。"
|
||
],
|
||
"a11y": [
|
||
"根元素有 role=\"status\"，插入时会播报，但四个都常驻页面会互相干扰。",
|
||
"按钮被写了 role=\"status\"，读屏不再识别为按钮，这是明确的语义错误。",
|
||
"状态图标是单字符且无 aria-label，状态信息只能从颜色与文案推断。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端用类名表达四种结果状态（.kole-result 叠 is-success / is-error / is-warning / is-info），结构件是 -icon / -title / -desc / -actions / -extra，文案由页内脚本按索引写入。",
|
||
"table": [
|
||
{
|
||
"name": "is-error",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ResultVariants.html:14）。"
|
||
},
|
||
{
|
||
"name": "is-info",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ResultVariants.html:16）。"
|
||
},
|
||
{
|
||
"name": "is-success",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ResultVariants.html:13）。"
|
||
},
|
||
{
|
||
"name": "is-warning",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ResultVariants.html:15）。"
|
||
},
|
||
{
|
||
"name": "kole-card",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ResultVariants.html:10）。"
|
||
},
|
||
{
|
||
"name": "kole-result",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ResultVariants.html:13）。"
|
||
},
|
||
{
|
||
"name": "kole-result-actions",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ResultVariants.html:30）。"
|
||
},
|
||
{
|
||
"name": "kole-result-btn",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ResultVariants.html:30）。"
|
||
},
|
||
{
|
||
"name": "kole-result-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ResultVariants.html:29）。"
|
||
},
|
||
{
|
||
"name": "kole-result-extra",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ResultVariants.html:32）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ResultVariants.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/ResultVariants.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"resultvariants-ex-1",
|
||
"resultvariants-ex-2",
|
||
"resultvariants-ex-3",
|
||
"resultvariants-ex-4"
|
||
],
|
||
"notes": [
|
||
"四个状态类见（frameworks/ResultVariants.html:13-16）。",
|
||
"内容按索引写入见（frameworks/ResultVariants.html:25-32）。",
|
||
"按钮上误加的 role=\"status\" 见（frameworks/ResultVariants.html:30-31）。"
|
||
]
|
||
}
|