90 lines
5.4 KiB
JSON
90 lines
5.4 KiB
JSON
{
|
||
"slug": "checkbox",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 复选框组：外层 .kole-checkbox 加 role=\"group\"，每项用 label 包原生 input[type=checkbox]。",
|
||
"usage": [
|
||
"结构是「容器 + label 包 input」：<div class=\"row kole-checkbox\"><label class=\"kole-checkbox-option\"><input type=\"checkbox\" checked> 邮件通知</label>…（Checkbox.html:6）。",
|
||
"选中态直接用原生 checked 属性表达，不额外写状态类，也不需要脚本同步（Checkbox.html:6）。",
|
||
"每项的文字写在 <label> 内部、input 之后，点击文字即可切换勾选，靠原生 label 的关联行为实现（Checkbox.html:6）。",
|
||
"整组没有 name 与表单容器，页面里只有两个独立复选框；若要提交或读取选中值需要自己补 name 与表单（Checkbox.html:6）。",
|
||
"该页的 <script> 为空（Checkbox.html:6 尾部），示例里没有全选或半选（indeterminate）的任何实现，这两个能力需要自己写脚本。",
|
||
"容器的 .row 类来自页面内联样式（Checkbox.html:5），只负责 flex 换行与 12px 间距，与组件类 .kole-checkbox 是两层职责。"
|
||
],
|
||
"bestPractices": [
|
||
"组件类 .kole-checkbox 只做 box-sizing 归一与字体继承（Checkbox.css:2-3），换行与间距靠外部 .row；直接把复选框并排时记得自己给布局容器。",
|
||
"禁用态在本页没有示例；CSS 里有 .kole-checkbox-disabled 与 [disabled] 两条（Checkbox.css:13），实际使用要同时加原生 disabled 属性。",
|
||
"契约提到「支持全选和半选状态」，本页标记与脚本都没有对应结构（没有全选框、没有 indeterminate 赋值），按实现以原生复选框为准（Checkbox.html:6）。",
|
||
"选项间距来自 .kole-checkbox-option 的 gap 令牌（Checkbox.css:31），写死像素间距会与其它端不一致；优先复用该类。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，载体是类名加原生属性：.kole-checkbox 是分组容器（带 role=\"group\"），.kole-checkbox-option 是单项，勾选状态由原生 checked、禁用由原生 disabled 表达；没有脚本钩子。",
|
||
"table": [
|
||
{
|
||
"name": "kole-checkbox",
|
||
"type": "基础类名",
|
||
"desc": "分组容器：box-sizing 归一、字体与正文色继承；本页同节点带 role=\"group\""
|
||
},
|
||
{
|
||
"name": "kole-checkbox-option",
|
||
"type": "结构类名",
|
||
"desc": "单项 label：inline-flex、垂直居中，间距取 --kole-space-4"
|
||
},
|
||
{
|
||
"name": "kole-checkbox-option",
|
||
"type": "原生属性",
|
||
"desc": "容器上写 role=\"group\"，把一组复选框声明为同一分组"
|
||
},
|
||
{
|
||
"name": "kole-checkbox-surface",
|
||
"type": "容器类名",
|
||
"desc": "面板外观类（示例二用它包说明文案）"
|
||
},
|
||
{
|
||
"name": "kole-checkbox-desc",
|
||
"type": "文字类名",
|
||
"desc": "说明文字类（示例二的补充说明用它）"
|
||
},
|
||
{
|
||
"name": "row",
|
||
"type": "演示页布局类名",
|
||
"desc": "演示页内联样式提供的 flex 换行行容器，与组件类叠加使用"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"容器带 role=\"group\"，读屏器会把这一组复选框作为一个分组播报，但组名缺失（没有 aria-label 或 legend），只能逐个念选项（Checkbox.html:6）。",
|
||
"用原生 <input type=\"checkbox\"> 承载，空格键切换与 Tab 聚焦由浏览器提供，触摸目标也随原生控件（Checkbox.html:6）。",
|
||
"文字在 <label> 内部，点击文字能切换勾选，读屏器也会把这段文字作为控件名称（Checkbox.html:6）。",
|
||
"本页没有为禁用项提供任何示例，若在业务里加 disabled，需要同时确认 .kole-checkbox-disabled 的 0.55 透明不会让文字对比度低于阈值（Checkbox.css:13）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Checkbox.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 空脚本）",
|
||
"desc": "Checkbox.html —— 纯 H5 演示页：两个 label 包原生 input 的静态结构，脚本为空"
|
||
},
|
||
{
|
||
"file": "frameworks/Checkbox.css",
|
||
"kind": "样式文件",
|
||
"desc": "Checkbox.css —— .kole-checkbox 分组根、.kole-checkbox-option 单项与禁用/面板等类"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"checkbox-ex-1",
|
||
"checkbox-ex-2"
|
||
],
|
||
"notes": [
|
||
"结构（label 包 input、checked 原生属性）：frameworks/Checkbox.html:6",
|
||
"空脚本：frameworks/Checkbox.html:6 尾部的 <script></script>",
|
||
"分组根与 box-sizing 归一：frameworks/Checkbox.css:2-3",
|
||
"单项样式：frameworks/Checkbox.css:31",
|
||
"禁用态：frameworks/Checkbox.css:13",
|
||
"说明文字与面板类：frameworks/Checkbox.css:4-6",
|
||
"table 里没有列 name 与 checked：本页两个复选框都没有 name，checked 只看第一个（Checkbox.html:6），把它们当 API 会误导。",
|
||
"table 只列 Checkbox.html 里真实出现的名字：框架类名 kole-checkbox / kole-checkbox-option / kole-checkbox-surface / kole-checkbox-desc 与 role、以及页面内联的 .row（frameworks/Checkbox.html:5-6）。",
|
||
"frameworks/Checkbox.css:13,16-17,31 里的 kole-checkbox-disabled、kole-checkbox-control、kole-checkbox-item 等类在 frameworks/Checkbox.html 的标记里没有出现，故未进 html 端的 table（CSS 端另有文件收录）。"
|
||
]
|
||
}
|