95 lines
3.5 KiB
JSON
95 lines
3.5 KiB
JSON
{
|
|
"slug": "radio",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生单选框：label 包住 input 与文案，互斥靠同名 name，整页无脚本。",
|
|
"usage": [
|
|
"每个选项是 <label class=\"kole-radio-option\"> 包住一个 <input type=\"radio\"> 与文案，点文字即选中。",
|
|
"互斥完全靠原生 name=\"kole-radio-demo\"，同组必须用同一个 name，改这串值等于换组。",
|
|
"默认选中用原生 checked 属性写在 HTML 上，示例是 value=\"a\" 那一项。",
|
|
"frameworks/Radio.html:6 的 <script> 标签之间是空的，没有任何脚本，也没有 data-* 钩子。"
|
|
],
|
|
"bestPractices": [
|
|
"同页多组单选必须用不同 name，复用同一个值会导致两组互相取消。",
|
|
"取选中值走原生表单语义（FormData 或 querySelector(\"input:checked\")），不要靠类名判断。",
|
|
"value 是提交时使用的实际值，示例的 a / b 应换成业务值。"
|
|
],
|
|
"a11y": [
|
|
"原生 radio 加 label 包裹，读屏能读出选项文案并能用方向键在同组内移动，这是最省事的无障碍做法。",
|
|
"这一组没有 <fieldset> 与 <legend>，读屏无法得知这组单选在问什么。",
|
|
"required 未声明，表单校验里这一组不会被强制选择。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端直接消费原生表单元素：<label class=\"kole-radio-option\"> 包 <input type=\"radio\" name>，互斥与选中都交给浏览器，.kole-radio 只是行容器，无脚本。",
|
|
"table": [
|
|
{
|
|
"name": "demo",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Radio.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-block",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Radio.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-note",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Radio.html:5）。"
|
|
},
|
|
{
|
|
"name": "kole-radio",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Radio.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-radio-desc",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Radio.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-radio-option",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Radio.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-radio-surface",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Radio.html:6）。"
|
|
},
|
|
{
|
|
"name": "row",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Radio.html:5）。"
|
|
},
|
|
{
|
|
"name": "sub",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Radio.html:5）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/Radio.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/Radio.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"radio-ex-1",
|
|
"radio-ex-2"
|
|
],
|
|
"notes": [
|
|
"label 包裹与 name 互斥见（frameworks/Radio.html:6），checked 默认项也在这一行。",
|
|
"脚本区为空见（frameworks/Radio.html:6）的 <script> 标签对。",
|
|
"样式依据：.kole-radio-option 的类名用法见（frameworks/Radio.html:6）。"
|
|
]
|
|
}
|