96 lines
5.3 KiB
JSON
96 lines
5.3 KiB
JSON
{
|
||
"slug": "timelinelist",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 timelinelist：.kole-timeline-node 是时间点圆，.kole-timeline-line 串线，四种 is-* 标进度。",
|
||
"usage": [
|
||
"时间点 .kole-timeline-node 是 10px 圆形、绝对定位在 left:5px、top:4px，z-index:1 压在连线之上（frameworks/TimelineList.css:5-8）。",
|
||
"连线 .kole-timeline-line 是绝对定位 2px 竖线，left:9px、top:16px，底边为 -10px 让它延伸到下一项（frameworks/TimelineList.css:9）。",
|
||
"内容区 .kole-timeline-content 用 padding-left:28px 给连线让出轨道宽度，下留 20px（frameworks/TimelineList.css:10）。",
|
||
"四种状态都用直接子选择器命中节点与连线：is-done 填品牌色，is-active 只换品牌边框加 3px 光晕，is-error 填错误色，is-pending 保持中性描边（frameworks/TimelineList.css:16-21）。",
|
||
"文本三段：时间 .kole-timeline-time 12px 次级色、标题 .kole-timeline-title 14px 字重 500、说明 .kole-timeline-desc 13px 次级色（frameworks/TimelineList.css:11-13）。",
|
||
"水平模式给根元素加 .is-horizontal：根转 flex、各项等分，连线由竖转横并把内容区改为上留 22px（frameworks/TimelineList.css:24-28）。"
|
||
],
|
||
"bestPractices": [
|
||
"状态选择器写的是 > .kole-timeline-node（直接子元素），所以节点必须是 .kole-timeline-item 的直接子元素；包一层容器会让所有状态色失效（frameworks/TimelineList.css:16-21）。",
|
||
"连线底边 -10px 是为跨项衔接预留的负值，与内容区的 20px 下内边距是配套数值，改一项要一起调（frameworks/TimelineList.css:9-10）。",
|
||
"is-active 与 is-pending 都不填满圆（只改边框色），is-done 与 is-error 才填实心，四种状态正好分成两组（frameworks/TimelineList.css:16-21）。"
|
||
],
|
||
"a11y": [
|
||
"时间线建议用 ol/li 承载，样式层只提供节点与连线的定位（frameworks/TimelineList.css:4）。",
|
||
"节点是 10px 纯色圆，无文本；状态语义需由内容区文字承担，节点建议置于 aria-hidden（frameworks/TimelineList.css:5-8）。",
|
||
"四种状态有两组填充差异（实心与空心），比单靠颜色更易区分，但文字仍需写明完成/进行中/错误（frameworks/TimelineList.css:16-21）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-timeline（根）、.kole-timeline-item（条目）、.kole-timeline-node（时间点）、.kole-timeline-line（连线）、.kole-timeline-content / -time / -title / -desc（内容区）；状态 is-done / is-active / is-error / is-pending / is-horizontal。",
|
||
"table": [
|
||
{
|
||
"name": "kole-timeline",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TimelineList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-timeline-item",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TimelineList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-timeline-node",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TimelineList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-timeline-line",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TimelineList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-timeline-content",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TimelineList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-timeline-time",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TimelineList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-timeline-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TimelineList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-timeline-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TimelineList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-done",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TimelineList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TimelineList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/TimelineList.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"timelinelist-ex-1"
|
||
],
|
||
"notes": [
|
||
"节点与连线见 frameworks/TimelineList.css:5-9，内容区见 frameworks/TimelineList.css:10-13，四态见 frameworks/TimelineList.css:16-21，水平模式见 frameworks/TimelineList.css:24-28。",
|
||
"is-active 的 3px 光晕色 rgba(47,84,235,0.2) 为硬编码，不随主题令牌变化（frameworks/TimelineList.css:18）。",
|
||
"示例只写了 .kole-timeline 容器（site/examples/timelinelist.json），条目与状态由脚本渲染。"
|
||
]
|
||
}
|