61 lines
2.9 KiB
JSON
61 lines
2.9 KiB
JSON
{
|
||
"slug": "buttongroup",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生按钮组：一个 paint() 把配置渲染成一组按钮，点一次整块重渲染刷新选中态。",
|
||
"usage": [
|
||
"HTML 里没有预置按钮，容器只有 .kole-btngroup（示例是 #single 与 #multi 两个），按钮全部由 paint() 生成。",
|
||
"按钮类名是拼出来的：\"kole-btngroup-btn\" 加 is-selected 或 is-disabled，禁用项同时带原生 disabled 属性。",
|
||
"每个按钮挂 data-value=\"...\"，点击时读 b.dataset.value 参与选中计算，选中值不存在 DOM 而存在闭包变量里。",
|
||
"单选与多选是 paint 的第 4 个参数 multiple：多选对数组 indexOf/splice 增删，单选直接把 selected 赋成新值。",
|
||
"每次点击后整块重新 innerHTML（再调一次 paint），没有单独的状态更新代码路径。"
|
||
],
|
||
"bestPractices": [
|
||
"整块重渲染会丢焦点：点击后按钮被重建，键盘用户需要自己把焦点移回，或改成只 toggle 类名。",
|
||
"paint 用字符串拼 HTML，选项 label 若来自用户输入要先转义。",
|
||
"选中值在闭包里而不是 DOM，多实例要各调一次 paint，否则会把上一组的值带过去。"
|
||
],
|
||
"a11y": [
|
||
"按钮是原生 <button>，Tab 与 Enter 可达；但组内没有 role=\"group\" 也没有 aria-pressed，读屏听不出哪个是选中项。",
|
||
"禁用项用了原生 disabled 属性而不只是加 is-disabled 类，键盘封锁这部分是对的。",
|
||
"整块重渲染后焦点丢失，键盘用户按一次键焦点就会掉回 body。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端用一个页内 paint() 把配置渲染成 .kole-btngroup-btn 按钮：选中是 is-selected、禁用是 is-disabled 加原生 disabled，取值靠按钮上的 data-value。",
|
||
"table": [
|
||
{
|
||
"name": "cls",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ButtonGroup.html:19）。"
|
||
},
|
||
{
|
||
"name": "kole-btngroup",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ButtonGroup.html:12）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ButtonGroup.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/ButtonGroup.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"buttongroup-ex-1",
|
||
"buttongroup-ex-2"
|
||
],
|
||
"notes": [
|
||
"容器见（frameworks/ButtonGroup.html:12），按钮类名拼装见（frameworks/ButtonGroup.html:19）。",
|
||
"data-value 取值与单选/多选分支见（frameworks/ButtonGroup.html:24-30）。",
|
||
"两次初始化调用见（frameworks/ButtonGroup.html:36）与（frameworks/ButtonGroup.html:39）。"
|
||
]
|
||
}
|