97 lines
5.1 KiB
JSON
97 lines
5.1 KiB
JSON
{
|
||
"slug": "switch",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 switch：.kole-switch-switch 是 44×22px 轨道，::after 是滑块，is-on 变色并右移。",
|
||
"usage": [
|
||
"轨道 .kole-switch-switch 是 44×22px 圆角胶囊（border-radius:999px），关闭底色取 --kole-color-border-strong，并留 2px 内边距（frameworks/Switch.css:27）。",
|
||
"滑块是 ::after 伪元素：18px 圆形、卡片底色、低投影，初始 left 由轨道内边距决定，位移过渡 0.15s（frameworks/Switch.css:28）。",
|
||
"开启态加 .is-on：轨道换品牌色，滑块用 translateX(22px) 推到右侧（frameworks/Switch.css:29-30）。",
|
||
"禁用态用 .kole-switch-disabled 或原生 [disabled]：not-allowed 光标加 0.55 透明度（frameworks/Switch.css:13）。",
|
||
"方向与外观看变体：.kole-switch-vertical / -horizontal 改 flex-direction，-primary / -secondary 给品牌实底与浅底（frameworks/Switch.css:10-11、23-24）。",
|
||
"视觉容器用 .kole-switch-surface 或 -panel（卡片底色加 1px 边框加中圆角加低投影）（frameworks/Switch.css:4）。"
|
||
],
|
||
"bestPractices": [
|
||
"该文件是 72 行生成骨架，但开关相关四行（第 27-30 行）恰好是本骨架里少数自成体系的样式，可直接用；其余块（pager、badge、drawer）与开关无关（frameworks/Switch.css:27-30）。",
|
||
"滑块位移 22px 是按 44px 宽、18px 圆、2px 内边距算出来的；改轨道尺寸时这个值要一起重算，否则滑块会越界（frameworks/Switch.css:27、30）。",
|
||
"开关没有内嵌开/关文字，语义完全靠角色属性；若需要文字标签请放在轨道外（frameworks/Switch.css:27-28）。"
|
||
],
|
||
"a11y": [
|
||
"建议用原生 input type=\"checkbox\" 或补 role=\"switch\" 与 aria-checked；示例在开关上写了 type、role、aria-checked（site/examples/switch.json）（frameworks/Switch.css:27）。",
|
||
"开启态有双重视觉变化（轨道变色加滑块位移），比单色开关更易辨认（frameworks/Switch.css:29-30）。",
|
||
"禁用用 [disabled] 属性时能自动脱离 Tab 序列，比只加 .kole-switch-disabled 类更完整（frameworks/Switch.css:13）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-switch-switch（轨道，配 ::after 滑块），状态为 .is-on 与 .kole-switch-disabled；另有骨架通用的 -vertical / -horizontal / -primary / -secondary / -surface / -panel。",
|
||
"table": [
|
||
{
|
||
"name": "kole-switch",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Switch.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Switch.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Switch.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Switch.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Switch.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Switch.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Switch.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Switch.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Switch.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-switch-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Switch.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Switch.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"switch-ex-1",
|
||
"switch-ex-2"
|
||
],
|
||
"notes": [
|
||
"轨道见 frameworks/Switch.css:27，滑块见 frameworks/Switch.css:28，开启态见 frameworks/Switch.css:29-30，禁用见 frameworks/Switch.css:13。",
|
||
"该文件属 72 行生成骨架家族（与 Alert.css 逐行同构），但 switch 段（frameworks/Switch.css:27-30）是本骨架里完整可用的组件样式。",
|
||
"示例 ex-1 用 switch 加 is-on 加 aria-checked，ex-2 用 surface 加 desc（site/examples/switch.json）。"
|
||
]
|
||
}
|