60 lines
3.4 KiB
JSON
60 lines
3.4 KiB
JSON
{
|
||
"slug": "mergedcelltable",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 mergedcelltable：.kole-merged 标合并单元格（品牌浅底居中），表格用 .kole-mergetable。",
|
||
"usage": [
|
||
"表格 .kole-mergetable 是 100% 宽、border-collapse:collapse，8px 圆角靠 overflow:hidden 裁切（frameworks/MergedCellTable.css:2）。",
|
||
"单元格默认带上、下、右三条 1px 边框，末列去掉右边框、末行去掉下边框，形成规整网格（frameworks/MergedCellTable.css:4-6）。",
|
||
"合并单元格只用一个类：.kole-mergetable .kole-merged 提供品牌浅底、字重 500、标题色并居中对齐（frameworks/MergedCellTable.css:7）。",
|
||
"行悬停时整行换页面底色，合并格要单独跟随：.kole-mergetable tbody tr:hover .kole-merged 覆盖成 #E6ECFF（frameworks/MergedCellTable.css:8-9）。",
|
||
"次级文字用 .is-muted，走次级文字色（frameworks/MergedCellTable.css:10）。"
|
||
],
|
||
"bestPractices": [
|
||
"合并用的是原生 rowspan/colspan，样式层只提供 .kole-merged 的外观；业务侧要自己算合并区间（frameworks/MergedCellTable.css:7）。",
|
||
"悬停那两条必须成对出现：没有第二条时合并格会因为自带品牌浅底而显得“没被悬停”，这是最容易漏的一处（frameworks/MergedCellTable.css:8-9）。",
|
||
"圆角裁切依赖 .kole-mergetable 的 overflow:hidden 加 8px 圆角；单元格若需 box-shadow 会被裁掉（frameworks/MergedCellTable.css:2）。"
|
||
],
|
||
"a11y": [
|
||
"合并单元格在表头场景下会影响读屏的行列关联，建议给合并格补 scope 或 headers 属性，样式层不管（frameworks/MergedCellTable.css:7）。",
|
||
"合并格用居中加大字重区分，比单靠颜色更稳；.is-muted 只是降色不改语义（frameworks/MergedCellTable.css:7、10）。",
|
||
"表格建议保留原生 thead/tbody 结构，本文件的行悬停依赖 tbody 选择器（frameworks/MergedCellTable.css:8）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-mergetable（表格）与 .kole-merged（合并单元格标记），次级文字用 .is-muted；没有其他状态类。",
|
||
"table": [
|
||
{
|
||
"name": "kole-mergetable",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MergedCellTable.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-merged",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MergedCellTable.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-muted",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MergedCellTable.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/MergedCellTable.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"mergedcelltable-ex-1"
|
||
],
|
||
"notes": [
|
||
"表格与边框见 frameworks/MergedCellTable.css:2-6，合并格见 frameworks/MergedCellTable.css:7，悬停与弱化见 frameworks/MergedCellTable.css:8-10。",
|
||
"前缀是 kole-mergetable / kole-merged（不是 kole-mergedcell*），按组件名拼类名会失效。",
|
||
"示例只写了 .kole-mergetable 容器（site/examples/mergedcelltable.json），行与合并格由脚本渲染。"
|
||
]
|
||
}
|