95 lines
4.2 KiB
JSON
95 lines
4.2 KiB
JSON
{
|
||
"slug": "fixedcolumntable",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生固定列表格：th 与 td 同挂 kole-fixed-left / -right 类，滚动容器负责阴影。",
|
||
"usage": [
|
||
"列定义是 cols 数组，每项可带 fixed: \"left\" 或 \"right\"，表头与单元格都据此拼类名 kole-fixed kole-fixed-<方向>。",
|
||
"表格必须包在 .kole-fixtable-wrap 里，横向滚动与固定列的阴影都由这层提供，裸放 <table> 不会有固定效果。",
|
||
"表头与表体分别写进两个容器：#fixhead（<thead> 里的 <tr>）与 #fixbody（<tbody>），列宽用 style=\"min-width:Npx\" 写在 th 上。",
|
||
"#fixhead 与 #fixbody 是一次性 innerHTML 拼装，整表没有事件绑定，数据变了要自己重跑那两段。",
|
||
"弱化单元格用 is-muted 类，条件是 c.key === \"status\" && d.status !== \"在职\"，即非在职状态置灰。"
|
||
],
|
||
"bestPractices": [
|
||
"列宽同时写在 cols 的 w 与 th 的 min-width 上，只改 JS 数据不改样式会有偏差，两处要一致。",
|
||
"固定列只在横向滚动容器内成立，去掉 .kole-fixtable-wrap 后 kole-fixed-* 会退化成普通单元格。",
|
||
"数据是内联一次性写入，接动态数据时要自己重跑那两段 innerHTML 拼装。"
|
||
],
|
||
"a11y": [
|
||
"表头用了 <th> 但没有 scope 属性，九列宽表里读屏难以把单元格与列名对上。",
|
||
"固定列只是视觉定位，语义上仍是普通 td，这点不影响读屏但要确保 colspan 与列数一致。",
|
||
"状态列只靠 is-muted 变灰表达差异，没有可读文本说明，色觉障碍用户拿不到信息。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端的契约是类名加表头表体容器：.kole-fixtable-wrap 滚动壳、.kole-fixtable 表体、单元格上的 kole-fixed 与 kole-fixed-left / kole-fixed-right 决定固定，is-muted 表示弱化，列宽走内联 min-width。",
|
||
"table": [
|
||
{
|
||
"name": "cls",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FixedColumnTable.html:47）。"
|
||
},
|
||
{
|
||
"name": "kole-demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FixedColumnTable.html:15）。"
|
||
},
|
||
{
|
||
"name": "kole-demo__title",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FixedColumnTable.html:16）。"
|
||
},
|
||
{
|
||
"name": "kole-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FixedColumnTable.html:13）。"
|
||
},
|
||
{
|
||
"name": "kole-fixtable",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FixedColumnTable.html:17）。"
|
||
},
|
||
{
|
||
"name": "kole-fixtable-wrap",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FixedColumnTable.html:17）。"
|
||
},
|
||
{
|
||
"name": "kole-h2",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FixedColumnTable.html:12）。"
|
||
},
|
||
{
|
||
"name": "kole-hint",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FixedColumnTable.html:23）。"
|
||
},
|
||
{
|
||
"name": "kole-page",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FixedColumnTable.html:11）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/FixedColumnTable.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/FixedColumnTable.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"fixedcolumntable-ex-1"
|
||
],
|
||
"notes": [
|
||
"列定义含 fixed 标记见（frameworks/FixedColumnTable.html:29）与（frameworks/FixedColumnTable.html:37）。",
|
||
"固定列类名拼装见（frameworks/FixedColumnTable.html:47）与（frameworks/FixedColumnTable.html:53），is-muted 见（frameworks/FixedColumnTable.html:54）。",
|
||
"滚动壳见（frameworks/FixedColumnTable.html:17），表头表体容器见（frameworks/FixedColumnTable.html:19-20）。"
|
||
]
|
||
}
|