97 lines
5.4 KiB
JSON
97 lines
5.4 KiB
JSON
{
|
||
"slug": "steplist",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 steplist：.kole-steplist-item 是步骤，.kole-steplist-node 是序号圆，三态只换节点与线色。",
|
||
"usage": [
|
||
"步骤项 .kole-steplist-item 是 position:relative 的 flex 行，23px 间距由 gap:12px 给，下留 20px 作为连接线空间（frameworks/StepList.css:4）。",
|
||
"连接线 .kole-steplist-line 是绝对定位的 2px 竖线，写死 left:14px、top:32px，靠 :last-child 隐藏最后一项的线（frameworks/StepList.css:5、7）。",
|
||
"序号圆 .kole-steplist-node 是 28px 圆形两像素描边，z-index:1 压在连接线上方（frameworks/StepList.css:8-9）。",
|
||
"三种状态只改节点与线的颜色：is-done 节点填品牌色加反色字且线也转品牌色，is-active 只换品牌边框并加 3px 光晕，is-error 节点与线都转错误色（frameworks/StepList.css:16-20）。",
|
||
"可点状态必须显式加 .is-clickable：它给出 pointer 光标与标题的悬停品牌色（frameworks/StepList.css:13-14）。",
|
||
"水平模式给根元素加 .is-horizontal：根变 flex、步骤项改纵向排列等分，连接线由竖转横（高度 2px、left/top 重算）（frameworks/StepList.css:23-26）。",
|
||
"文本层级用 .kole-steplist-title（14px 字重 500）与 .kole-steplist-desc（13px 次级色）（frameworks/StepList.css:11-12）。"
|
||
],
|
||
"bestPractices": [
|
||
"连接线的 left:14px 是按 28px 节点居中算出来的（左侧 14px 处正是圆心），节点尺寸一改这条要同步，否则线不在圆心上（frameworks/StepList.css:5、9）。",
|
||
"水平模式下线的定位选择器很长（>.kole-steplist-item > .kole-steplist-line），说明线必须是步骤项的直接子元素；包一层 wrapper 会让水平线失效（frameworks/StepList.css:25）。",
|
||
"is-active 是唯一不给节点填色的状态（只换边框加光晕），它与 is-done 的区分靠这一点，别给 active 也填色以免两态混淆（frameworks/StepList.css:18）。"
|
||
],
|
||
"a11y": [
|
||
"步骤列表建议用 ol/li 承载，样式层只提供节点与连线外观（frameworks/StepList.css:4）。",
|
||
"三种状态只有颜色与填充差异，需要配合文字（如“已完成”）或 aria-current 才能被读屏理解（frameworks/StepList.css:16-20）。",
|
||
"is-clickable 才给 pointer 光标，但可聚焦性仍需业务侧提供 button 或 tabindex（frameworks/StepList.css:13-14）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-steplist（根）、.kole-steplist-item（步骤）、.kole-steplist-line（连接线）、.kole-steplist-node（序号圆）、.kole-steplist-body / -title / -desc（文本区）；状态 is-done / is-active / is-error / is-clickable / is-horizontal。",
|
||
"table": [
|
||
{
|
||
"name": "kole-steplist",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-item",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-line",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-node",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-body",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-clickable",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-done",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/StepList.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"steplist-ex-1"
|
||
],
|
||
"notes": [
|
||
"步骤项与连线见 frameworks/StepList.css:4-7，节点见 frameworks/StepList.css:8-9，三态见 frameworks/StepList.css:16-20，水平模式见 frameworks/StepList.css:23-26。",
|
||
"is-horizontal 挂在根元素上（.kole-steplist.is-horizontal），其余状态挂在步骤项上，两层状态类作用对象不同（frameworks/StepList.css:23 与 16）。",
|
||
"示例只写了 .kole-steplist 容器（site/examples/steplist.json），步骤与状态由脚本渲染。"
|
||
]
|
||
}
|