90 lines
4.8 KiB
JSON
90 lines
4.8 KiB
JSON
{
|
||
"slug": "switchgroup",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 switchgroup：.kole-switchgroup-head 是分组头，开关本体 .kole-switch 靠 is-on 变色并右移滑块。",
|
||
"usage": [
|
||
"分组头 .kole-switchgroup-head 用 space-between 分列标题与全选控件，带下边框与 8px 下外边距（frameworks/SwitchGroup.css:4）。",
|
||
"每行 .kole-switch-row 也是 space-between，把左侧文字段与右侧开关分列两端（frameworks/SwitchGroup.css:6）。",
|
||
"左侧文字分成两段：.kole-switch-text 纵向 stacking，内层 .kole-switch-label 是 14px 正文色、.kole-switch-desc 是 12px 次级色（frameworks/SwitchGroup.css:7-9）。",
|
||
"开关本体 .kole-switch 是 44×22px 圆角胶囊，默认取 --kole-color-border 作关闭底色，背景过渡 0.2s（frameworks/SwitchGroup.css:10）。",
|
||
"滑块是 ::after 伪元素：18px 圆、left:2px 起始；开启时 .is-on::after 把 left 推到 24px，同时 .is-on 把底色换成品牌色（frameworks/SwitchGroup.css:11-13）。"
|
||
],
|
||
"bestPractices": [
|
||
"开关没有内嵌文字，只有底色与滑块位置变化；若要加开/关文案需自行在 ::after 或额外元素上放内容（frameworks/SwitchGroup.css:12）。",
|
||
"滑块位移值 left:24px 是按 44px 宽、18px 圆加 2px 边距算出来的；改开关尺寸时这个值要一起重算，否则滑块会越界或不满位（frameworks/SwitchGroup.css:10、13）。",
|
||
"开关的交互语义仍是 checkbox：样式层只提供外观，示例在外层写了 role（site/examples/switchgroup.json），业务侧需维护 aria-checked（frameworks/SwitchGroup.css:10-11）。"
|
||
],
|
||
"a11y": [
|
||
"开关是 44×22px 的 div，需要 role=\"switch\" 与 aria-checked 才能被读屏识别；样式层不提供（frameworks/SwitchGroup.css:10）。",
|
||
"开启态有双重视觉变化（底色加滑块位移），不只靠颜色，这一点比单色开关更稳（frameworks/SwitchGroup.css:11、13）。",
|
||
"分组头的全选控件需要有可访问名称说明它作用于整组（frameworks/SwitchGroup.css:4）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-switchgroup / -head / -title（分组层）与 .kole-switch-row / -text / -label / -desc（行层），开关本体是 .kole-switch，状态为 .is-on。",
|
||
"table": [
|
||
{
|
||
"name": "kole-switchgroup",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SwitchGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switchgroup-head",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SwitchGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switchgroup-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SwitchGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-row",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SwitchGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-text",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SwitchGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-label",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SwitchGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SwitchGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SwitchGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-on",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SwitchGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/SwitchGroup.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"switchgroup-ex-1"
|
||
],
|
||
"notes": [
|
||
"分组头见 frameworks/SwitchGroup.css:4，行与文字见 frameworks/SwitchGroup.css:6-9，开关本体见 frameworks/SwitchGroup.css:10，开启态见 frameworks/SwitchGroup.css:11-13。",
|
||
"开关类名是 .kole-switch（与 Switch 组件的根类同名），本文件内它是分组行里的开关实体，同页引入 Switch.css 时会有类名重叠（frameworks/SwitchGroup.css:10）。",
|
||
"示例只写了 .kole-switchgroup 容器（site/examples/switchgroup.json），开关行由脚本渲染。"
|
||
]
|
||
}
|