95 lines
3.9 KiB
JSON
95 lines
3.9 KiB
JSON
{
|
||
"slug": "descriptions",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生描述列表：用真正的 table 排键值详情，th 当标签 td 当值，整页无脚本。",
|
||
"usage": [
|
||
"结构是 .kole-descriptions-table 里的 <table>，<tbody> 每行按「<th>标签</th><td>值</td>」成对排列，两对即四列。",
|
||
"标签用 <th> 而不是加粗的 <td>，这是本端唯一的语义优势，读屏会把标签与值关联起来。",
|
||
"列数由 CSS 决定，.kole-descriptions-table 里的 <th> 与 <td> 只按顺序排列，1 到 4 列不是类名开关。",
|
||
"frameworks/Descriptions.html:6 的 <script> 标签之间是空的，详情是静态只读内容，没有展开或编辑行为。"
|
||
],
|
||
"bestPractices": [
|
||
"单元格顺序就是键值配对顺序，增删字段必须成对操作，否则后续所有列会错位。",
|
||
"没有 <thead>，列含义只存在于每个 <th> 里，跨行布局改动时要确认 CSS 没有依赖列索引。",
|
||
"数值类字段建议额外加右对齐样式，示例里数字与文本都是左对齐。"
|
||
],
|
||
"a11y": [
|
||
"<th> 让读屏把标签与值配对读出，比 div 拼的描述列表可靠，这个写法要保留。",
|
||
"表格没有 <caption>，读屏进入表格时不知道这张表是什么（例如「订单详情」）。",
|
||
"成对 <th>/<td> 没有 scope 属性，简单两列结构浏览器能推断，出现合并单元格时会退化。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端用原生表格元素加类名：.kole-descriptions-table 包 <table>，<th> 承载标签、<td> 承载值，.kole-descriptions-surface 与 -desc 是外围容器与说明。",
|
||
"table": [
|
||
{
|
||
"name": "demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Descriptions.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-block",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Descriptions.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-note",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Descriptions.html:5）。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Descriptions.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Descriptions.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-surface",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Descriptions.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-table",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Descriptions.html:6）。"
|
||
},
|
||
{
|
||
"name": "row",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Descriptions.html:5）。"
|
||
},
|
||
{
|
||
"name": "sub",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Descriptions.html:5）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Descriptions.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Descriptions.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"descriptions-ex-1",
|
||
"descriptions-ex-2"
|
||
],
|
||
"notes": [
|
||
"表格结构见（frameworks/Descriptions.html:6），<th> 与 <td> 的成对排列也在这一行。",
|
||
"脚本区为空见（frameworks/Descriptions.html:6）的 <script> 标签对。",
|
||
"类名依据：.kole-descriptions-table 与 .kole-descriptions-desc 的用法见（frameworks/Descriptions.html:6）。"
|
||
]
|
||
}
|