75 lines
3.9 KiB
JSON
75 lines
3.9 KiB
JSON
{
|
||
"slug": "summaryrowtable",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 summaryrowtable：.kole-sumrow 是底部汇总行（品牌浅底加 2px 顶线），表格用 .kole-sumtable。",
|
||
"usage": [
|
||
"表格 .kole-sumtable 是 100% 宽、border-collapse:collapse，8px 圆角靠 overflow:hidden 裁切（frameworks/SummaryRowTable.css:2）。",
|
||
"汇总行 .kole-sumrow td 用品牌浅底、字重 600，并加一条 2px 的 #B7C4FF 顶线把它与数据行分开（frameworks/SummaryRowTable.css:7）。",
|
||
"汇总标签 .kole-sum-label 走品牌字色，强调这是统计口径而非普通单元格（frameworks/SummaryRowTable.css:8）。",
|
||
"数值语义色是三个独立类：.is-pos 转成功色、.is-neg 转错误色、.is-muted 转次级文字色（frameworks/SummaryRowTable.css:9-11）。",
|
||
"行悬停换页面底色，末行去掉下边框（frameworks/SummaryRowTable.css:5-6）。"
|
||
],
|
||
"bestPractices": [
|
||
"汇总行建议放进 tfoot：样式虽用 .kole-sumrow 类命中，但语义上 tfoot 才让读屏知道这是总计，且末行去边框规则依赖结构（frameworks/SummaryRowTable.css:5、7）。",
|
||
"正负数值色是 .is-pos / .is-neg 两个平级类，同时挂上去时后定义的规则赢（is-neg 在最后，第 11 行）（frameworks/SummaryRowTable.css:10-11）。",
|
||
"汇总行顶线色 #B7C4FF 是硬编码，不随主题令牌变化（frameworks/SummaryRowTable.css:7）。"
|
||
],
|
||
"a11y": [
|
||
"增减不能只靠颜色：请在单元格文本里带上正负号或括号，色觉障碍用户同样可读（frameworks/SummaryRowTable.css:10-11）。",
|
||
"汇总行建议用 tfoot 加 scope 属性让读屏正确关联列（frameworks/SummaryRowTable.css:7）。",
|
||
"表格需保留原生 table 结构，本文件的行悬停依赖 tbody 选择器（frameworks/SummaryRowTable.css:6）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-sumtable（表格）、.kole-sumrow（汇总行）、.kole-sum-label（汇总标签），数值语义用 .is-pos / .is-neg / .is-muted 三个类。",
|
||
"table": [
|
||
{
|
||
"name": "kole-sumtable",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SummaryRowTable.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-sumrow",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SummaryRowTable.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-sum-label",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SummaryRowTable.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-muted",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SummaryRowTable.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-pos",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SummaryRowTable.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-neg",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/SummaryRowTable.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/SummaryRowTable.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"summaryrowtable-ex-1"
|
||
],
|
||
"notes": [
|
||
"表格见 frameworks/SummaryRowTable.css:2-6，汇总行与标签见 frameworks/SummaryRowTable.css:7-8，三个语义类见 frameworks/SummaryRowTable.css:9-11。",
|
||
"前缀是 kole-sumtable / kole-sumrow / kole-sum-label（缩写形式），不是 kole-summaryrow*。",
|
||
"示例只写了 .kole-sumtable 容器（site/examples/summaryrowtable.json），行与汇总由脚本渲染。"
|
||
]
|
||
}
|