89 lines
3.6 KiB
JSON
89 lines
3.6 KiB
JSON
{
|
||
"slug": "radiocard",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生单选卡片：选中值存一个变量，点卡片重渲染后给命中项叠 is-selected。",
|
||
"usage": [
|
||
"卡片是 .kole-radiocard，内部依次 .kole-radiocard-icon、.kole-radiocard-body（含 -title 与 -desc）、.kole-radiocard-mark，网格外层为 .kole-radiocard-grid。",
|
||
"选中是单值变量 selected（示例初值 \"pro\"），点卡片时直接 selected = el.dataset.value 再整块重渲染。",
|
||
"选中态拼在模板里：与 selected 相等才补 is-selected，与多选卡片不同，这里不做数组增删。",
|
||
"取值靠卡片上的 data-value，点击监听在重渲染后重新绑定。"
|
||
],
|
||
"bestPractices": [
|
||
"声明了 role=\"radio\" 却没有 radiogroup、也没有 aria-checked，语义只做了一半，接入时补上。",
|
||
"内层 .kole-radiocard-mark 也带 role=\"radio\" 与 tabindex=\"0\"，会产生重复焦点站，建议去掉内层。",
|
||
"整块重渲染丢焦点，键盘切换要自己恢复。"
|
||
],
|
||
"a11y": [
|
||
"role=\"radio\" 配 tabindex=\"0\" 但无 ARIA 选中状态，读屏读不出当前选中的是哪个套餐。",
|
||
"卡片只有 click 监听，键盘按回车空格无反应。",
|
||
"图标字段是 emoji（🟢 🔵 🟣），读屏会念出颜色名，而这些与文案含义重复，宜加 aria-hidden。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端是类名加 data-* ：.kole-radiocard 卡片（data-value 标识取值）、选中叠 is-selected、内部 -icon / -body / -mark 分件，单选值存在页内变量里并在每次点击后整体重渲染。",
|
||
"table": [
|
||
{
|
||
"name": "kole-radiocard",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/RadioCard.html:12）。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-body",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/RadioCard.html:27）。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/RadioCard.html:28）。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-grid",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/RadioCard.html:12）。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-icon",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/RadioCard.html:26）。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-mark",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/RadioCard.html:29）。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-title",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/RadioCard.html:27）。"
|
||
},
|
||
{
|
||
"name": "selected",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/RadioCard.html:20）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/RadioCard.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/RadioCard.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"radiocard-ex-1"
|
||
],
|
||
"notes": [
|
||
"卡片模板与 is-selected 拼装见（frameworks/RadioCard.html:25）。",
|
||
"单选赋值与重渲染见（frameworks/RadioCard.html:32），初始化调用见（frameworks/RadioCard.html:35）。",
|
||
"内层 mark 的 role / tabindex 见（frameworks/RadioCard.html:29）。"
|
||
]
|
||
}
|