97 lines
5.5 KiB
JSON
97 lines
5.5 KiB
JSON
{
|
||
"slug": "descriptions",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 descriptions：.kole-descriptions-table 是描述表格，th/td 已给内边距与底部分隔线。",
|
||
"usage": [
|
||
"描述列表的核心是 .kole-descriptions-table：100% 宽加 border-collapse:collapse，单元格由 th/td 元素选择器统一给 8px 12px 内边距与 1px 下边框（frameworks/Descriptions.css:47-48）。",
|
||
"表头 th 额外取表头底色与次级文字色，用于承载“字段名”一列（frameworks/Descriptions.css:49）。",
|
||
"外层卡片底用 .kole-descriptions-surface 或 .kole-descriptions-panel：卡片底色、1px 边框、--kole-radius-medium 圆角加低投影（frameworks/Descriptions.css:4）。",
|
||
"标题与说明分两级：.kole-descriptions-title 用标题色加 --kole-type-h2-weight 字重，.kole-descriptions-desc 用次级色加注脚字号（frameworks/Descriptions.css:5-6）。",
|
||
"两栏布局 .kole-descriptions-layout 默认 180px 加 1fr，加 .is-collapsed 后左列收到 64px（frameworks/Descriptions.css:19-20）。",
|
||
"轻量外观用 .kole-descriptions-secondary（品牌字色加品牌浅底加品牌边框），紧凑内边距用 .kole-descriptions-compact（frameworks/Descriptions.css:11-12）。"
|
||
],
|
||
"bestPractices": [
|
||
"该文件是 72 行生成骨架（与 Alert.css / Avatar.css 等 20 个文件仅首行组件名不同），骨架里并存 switch、pager、badge、drawer 等与描述列表无关的块；真正能用的只有 table、surface/panel、title/desc 这几段（frameworks/Descriptions.css:4-6、47-49）。",
|
||
"单元格的 1px 下边框由 th/td 元素选择器给，没法只给某一行去掉；末行保留分隔线是有意的表格观感（frameworks/Descriptions.css:48）。",
|
||
"字段列与值列宽度不由本文件决定，靠表格自身布局；要固定宽度需在业务侧给 th 加宽度（frameworks/Descriptions.css:47）。"
|
||
],
|
||
"a11y": [
|
||
"描述表建议保留原生 table 与 th 结构，示例就直接用 th 承载字段名（site/examples/descriptions.json）（frameworks/Descriptions.css:47-49）。",
|
||
"表头只用了颜色区分（表头底色加次级文字色），语义仍靠 th 元素本身，不要改成 td（frameworks/Descriptions.css:49）。",
|
||
"骨架已统一 button/a/input/select 的 focus-visible 为 2px 品牌 outline 加 2px 偏移（frameworks/Descriptions.css:9），覆盖样式时保留。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-descriptions-table（描述表）与 .kole-descriptions-surface / -panel（卡底）、-title / -desc（文案）、-layout（两栏）、-secondary / -compact（外观变体），状态 .is-collapsed。",
|
||
"table": [
|
||
{
|
||
"name": "kole-descriptions",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Descriptions.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Descriptions.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Descriptions.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Descriptions.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Descriptions.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Descriptions.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Descriptions.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Descriptions.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Descriptions.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-descriptions-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Descriptions.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Descriptions.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"descriptions-ex-1",
|
||
"descriptions-ex-2"
|
||
],
|
||
"notes": [
|
||
"描述表见 frameworks/Descriptions.css:47-49，卡底与文案见 frameworks/Descriptions.css:4-6，两栏折叠见 frameworks/Descriptions.css:19-20。",
|
||
"该文件与 Alert.css、Avatar.css 等 20 个文件逐行同构（仅首行组件名不同），骨架内非描述语义的块未写入本页类名表。",
|
||
"示例 ex-1 用 table，ex-2 用 surface 加 desc（site/examples/descriptions.json），两例都不含字段列。"
|
||
]
|
||
}
|