70 lines
3.8 KiB
JSON
70 lines
3.8 KiB
JSON
{
|
||
"slug": "densityswitcher",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 densityswitcher：.kole-densw-opt 是密度档位，is-active 上品牌底，共三档可选。",
|
||
"usage": [
|
||
"选项条由 .kole-densw-row 承载，内部 .kole-densw-opt 是单个可点档位（frameworks/DensitySwitcher.css:6 起）。",
|
||
"当前档加 .is-active：底色切品牌色、文字切反色，是唯一的选中表达（frameworks/DensitySwitcher.css:6）。",
|
||
"三档名称是不带 is- 前缀的独立类：.default、.compact、.loose，分别对应默认、紧凑、宽松（frameworks/DensitySwitcher.css:9-11）。",
|
||
"演示区用 .kole-densw-demo 包住被切换密度的内容，切换时由脚本改它的类（frameworks/DensitySwitcher.css:2 起）。",
|
||
"弱化说明文字用 .muted，走次级文字色（frameworks/DensitySwitcher.css:14）。"
|
||
],
|
||
"bestPractices": [
|
||
"档位类（.default/.compact/.loose）与选中类（.is-active）是两套语义：前者标明这一档是谁，后者标明当前选中，不能互相替代（frameworks/DensitySwitcher.css:6、9-11）。",
|
||
"密度切换的实际间距变化不写在 switcher 文件里，而是由被控内容的类承担；样式层只提供选项条外观（frameworks/DensitySwitcher.css:2）。",
|
||
"该文件只有 15 行、共 4 个自有类，是刻意做薄的：想要图标或分段样式需要业务侧补（frameworks/DensitySwitcher.css:6-14）。"
|
||
],
|
||
"a11y": [
|
||
"示例在容器上写了 role（site/examples/densityswitcher.json），说明档位分组语义由业务侧声明，样式层不管（frameworks/DensitySwitcher.css:6）。",
|
||
"选中态是品牌底加反色文字，对比度足够；但仍建议补 aria-pressed 或 aria-checked 让读屏识别当前档（frameworks/DensitySwitcher.css:6）。",
|
||
"选项尺寸由内边距决定，触控场景请确认点击区够大，样式文件未设最小高度（frameworks/DensitySwitcher.css:6）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-densw-row（选项条）与 .kole-densw-opt（档位），档位用 .default / .compact / .loose 命名，状态用 .is-active，另有 .kole-densw-demo（演示区）与 .muted（弱化）。",
|
||
"table": [
|
||
{
|
||
"name": "kole-densw",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DensitySwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-densw-opt",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DensitySwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DensitySwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-densw-demo",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DensitySwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-densw-row",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DensitySwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DensitySwitcher.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"densityswitcher-ex-1"
|
||
],
|
||
"notes": [
|
||
"选中态见 frameworks/DensitySwitcher.css:6，三档类见 frameworks/DensitySwitcher.css:9-11，弱化类见 frameworks/DensitySwitcher.css:14。",
|
||
"该文件前缀是 kole-densw（不是 kole-densityswitcher），按组件名拼类名会失效。",
|
||
"契约的 density 取值在 css 端落成 .default/.compact/.loose 三个类，本页未写成 prop。"
|
||
]
|
||
}
|