86 lines
4.5 KiB
JSON
86 lines
4.5 KiB
JSON
{
|
||
"slug": "checkboxcard",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 checkboxcard：.kole-checkcard 是可点卡片，is-selected 换品牌浅底并让 .kole-checkcard-mark 显勾。",
|
||
"usage": [
|
||
"多卡排列用 .kole-checkcard-grid，它是 display:grid 加 12px 间距，列数交由外部决定（frameworks/CheckboxCard.css:3）。",
|
||
"单卡 .kole-checkcard 是横向 flex、12px 间距并顶对齐，自带 1px 边框与卡片底（frameworks/CheckboxCard.css:4）。",
|
||
"选中态挂在卡上：.kole-checkcard.is-selected 同时换品牌边框与品牌浅底（frameworks/CheckboxCard.css:7）。",
|
||
"勾选标记分两步：.is-selected .kole-checkcard-mark 把 16px 方块填成品牌色，再由 ::after 用 content:'✓' 画出对勾（frameworks/CheckboxCard.css:12、14-15）。",
|
||
"内容三段用 .kole-checkcard-icon（24px 字号）、.kole-checkcard-body（flex:1）、.kole-checkcard-title 与 .kole-checkcard-desc（frameworks/CheckboxCard.css:8-11）。",
|
||
"卡片 hover 只换边框色，不位移不投影（frameworks/CheckboxCard.css:6）。"
|
||
],
|
||
"bestPractices": [
|
||
"对勾是 ::after 伪元素画出来的，不在 DOM 里；要换成图标字体或 svg 需覆盖 ::after 的 content（frameworks/CheckboxCard.css:15）。",
|
||
"hover 的边框色 #C9D4F2 是硬编码、与选中态的品牌色不同；想让悬停也走令牌得覆盖这一条（frameworks/CheckboxCard.css:6）。",
|
||
"选中与否完全靠外部切 .is-selected，样式文件不含点击逻辑；多选场景要在业务侧维护选中集合（frameworks/CheckboxCard.css:7）。"
|
||
],
|
||
"a11y": [
|
||
"卡片可点但本质是 div，建议用原生 checkbox 或补 role 与 aria-checked，样式层只给视觉（frameworks/CheckboxCard.css:4）。",
|
||
"选中信息不只有颜色：对勾形状同时出现（content:'✓'），色觉障碍用户可据此判断（frameworks/CheckboxCard.css:15）。",
|
||
"示例在网格容器上写了 role（site/examples/checkboxcard.json），说明分组语义由业务侧声明，样式层不管。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-checkcard-grid（网格）与 .kole-checkcard（卡）加 .kole-checkcard-icon / -body / -title / -desc / -mark 五个分区类，状态只有 .is-selected。",
|
||
"table": [
|
||
{
|
||
"name": "kole-checkcard-grid",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CheckboxCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CheckboxCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-selected",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CheckboxCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-icon",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CheckboxCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-body",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CheckboxCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CheckboxCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CheckboxCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-checkcard-mark",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CheckboxCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/CheckboxCard.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"checkboxcard-ex-1"
|
||
],
|
||
"notes": [
|
||
"网格见 frameworks/CheckboxCard.css:3，卡片与 hover 见 frameworks/CheckboxCard.css:4-6，选中态见 frameworks/CheckboxCard.css:7，标记与对勾见 frameworks/CheckboxCard.css:12-15。",
|
||
"该文件以 kole-checkcard 为前缀（不是 kole-checkboxcard），按组件名拼类名会失效。",
|
||
"契约的 options/multiple 属设计词汇，css 端没有对应类，本页未写入。"
|
||
]
|
||
}
|