85 lines
3.7 KiB
JSON
85 lines
3.7 KiB
JSON
{
|
||
"slug": "checkboxcard",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生 CheckboxCard：卡片多选，选中加 is-selected，点一次切换数组后整块重渲染。",
|
||
"usage": [
|
||
"卡片是 .kole-checkcard，内部按 .kole-checkcard-icon、.kole-checkcard-body（内含 -title 与 -desc）、.kole-checkcard-mark 三段组织，网格外层是 .kole-checkcard-grid。",
|
||
"多选状态存在数组里：点击时 indexOf 命中就 splice 删除，否则 push，判断依据是卡片上的 data-value。",
|
||
"选中态拼在模板里：\"kole-checkcard \" + (on ? \"is-selected\" : \"\")，状态只体现在类名上。",
|
||
"按命名与示例语境应是单选，实现却是多选：render 里用 indexOf / splice 增删，role=\"radio\" 与多选行为并不一致。",
|
||
"每次点击重跑 render() 重建全部卡片并重新绑 click，没有增量更新路径。"
|
||
],
|
||
"bestPractices": [
|
||
"role=\"radio\" 配多选是语义错配：要保留多选就改成 role=\"checkbox\" 并同步 aria-checked。",
|
||
"内层 .kole-checkcard-mark 也带 role=\"radio\" 与 tabindex=\"0\"，会产生重复可聚焦项，接入时建议去掉内层的 role 与 tabindex。",
|
||
"整块重渲染丢焦点，键盘操作后需要自己恢复焦点位置。"
|
||
],
|
||
"a11y": [
|
||
"role=\"radio\" 但没有外层 radiogroup，也没有 aria-checked，选中状态读屏拿不到。",
|
||
"卡片有 tabindex=\"0\" 却只有 click 监听，键盘无法切换，需要补 Enter / Space 处理。",
|
||
"内层 .kole-checkcard-mark 重复声明 role 与 tabindex，键盘会出现两个焦点站。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端用类名加 data-* ：.kole-checkcard 卡片（data-value 标识取值）、选中加 is-selected、内部 .kole-checkcard-icon / -body / -mark 分件，多选逻辑全在页内 render 脚本。",
|
||
"table": [
|
||
{
|
||
"name": "kole-checkcard",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/CheckboxCard.html:12）。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-body",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/CheckboxCard.html:28）。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/CheckboxCard.html:29）。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-grid",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/CheckboxCard.html:12）。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-icon",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/CheckboxCard.html:27）。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-mark",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/CheckboxCard.html:30）。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-title",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/CheckboxCard.html:28）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/CheckboxCard.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/CheckboxCard.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"checkboxcard-ex-1"
|
||
],
|
||
"notes": [
|
||
"卡片模板与 is-selected 拼装见（frameworks/CheckboxCard.html:26）。",
|
||
"多选增删逻辑见（frameworks/CheckboxCard.html:34-35），初始化调用见（frameworks/CheckboxCard.html:40）。",
|
||
"内层 mark 的 role 与 tabindex 见（frameworks/CheckboxCard.html:30）。"
|
||
]
|
||
}
|