81 lines
3.7 KiB
JSON
81 lines
3.7 KiB
JSON
{
|
||
"slug": "table",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "表格样式：kole-table 基础类加列装饰类，配 is-selected 行状态与空态、加载遮罩。",
|
||
"usage": [
|
||
"表格骨架由 .kole-table 给出（表头底色、单元格内边距与下边框），列级差异靠加在 th/td 上的 .align-right、.col-action、.col-selection 修饰类。",
|
||
"行选中加 .is-selected（挂在 tr 上），复选列用 .col-selection 配 .checkbox 元素。",
|
||
"排序表头在 th 上加 .sortable 与指示元素 .sort-ind，升/降序方向由 .active 表达。",
|
||
"空态用 .empty 占位行，加载叠加层用 .loading-mask 容器内含 .spinner，二者都覆盖在表格之上。",
|
||
"表头底色可换成 --kole-color-table-header-bg，行 hover 底色取 --kole-color-page-bg。"
|
||
],
|
||
"bestPractices": [
|
||
"对齐类只在需要时加，.align-right 是右对齐列的修饰，不要靠内联 style 覆盖单元格 padding。",
|
||
".loading-mask 内必须有 .spinner，否则遮罩只有底色没有进度指示。",
|
||
".sort-ind 的方向由 .active 切换，宿主需要在排序状态变化时同时改这两处类名。",
|
||
"表格宽度与横向滚动由宿主容器决定，本文件不设滚动容器，宽表要自己包一层 overflow。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-table",
|
||
"type": "基础类",
|
||
"desc": "表格基线：表头底色、单元格 8/12px 内边距与行下边框（frameworks/Table.css:2）"
|
||
},
|
||
{
|
||
"name": "is-selected",
|
||
"type": "状态类",
|
||
"desc": "选中行底色（frameworks/Table.css:11）"
|
||
},
|
||
{
|
||
"name": "align-right",
|
||
"type": "结构类",
|
||
"desc": "单元格右对齐（金额/数字列）（frameworks/Table.css:12）"
|
||
},
|
||
{
|
||
"name": "sortable",
|
||
"type": "结构类",
|
||
"desc": "可排序表头，hover 提示（frameworks/Table.css:13）"
|
||
},
|
||
{
|
||
"name": "sort-ind",
|
||
"type": "结构类",
|
||
"desc": "排序指示三角，配 .active 表当前方向（frameworks/Table.css:14）"
|
||
},
|
||
{
|
||
"name": "empty",
|
||
"type": "状态类",
|
||
"desc": "空数据占位行（frameworks/Table.css:19）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"保持原生 table/thead/tbody/th 结构，scope 或 aria-label 由宿主补，样式层不生成语义。",
|
||
"选中态只改背景色，行选中语义需宿主同步 aria-selected。",
|
||
"加载遮罩出现时应同时设置 aria-busy 并阻止键盘进入表格内的控件。",
|
||
"表头与正文的底色令牌不同（table-header-bg / card-bg），夜间主题下都要复核文字对比度。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Table.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Table.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"table-ex-1"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Table.css:2 定义 .kole-table",
|
||
"依据 frameworks/Table.css:11 定义 .is-selected",
|
||
"依据 frameworks/Table.css:12 定义 .align-right",
|
||
"依据 frameworks/Table.css:13 定义 .sortable",
|
||
"依据 frameworks/Table.css:14 定义 .sort-ind",
|
||
"依据 frameworks/Table.css:19 定义 .empty",
|
||
"类名总表来自 frameworks/Table.css（facts.consumedApi.classes，14 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|