68 lines
3.1 KiB
JSON
68 lines
3.1 KiB
JSON
{
|
||
"slug": "steps",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "步骤条样式：kole-steps 配方向类，每个 kole-step 用 is-finish/is-process/is-error/is-wait 表状态。",
|
||
"usage": [
|
||
"方向是加在根 .kole-steps 上的 .horizontal / .vertical，两者互斥且默认按行内排布。",
|
||
"每个步骤 .kole-step 由 .kole-step-icon 序号圆、.kole-step-title、.kole-step-desc 与纵向模式的 .kole-step-body 组成。",
|
||
"状态类写在 .kole-step 上：.is-finish 已完成、.is-process 进行中、.is-error 异常、.is-wait 待处理，连接线颜色随之变化。",
|
||
"连接线由 .kole-step-icon 的伪元素绘制，纵向模式下改由 .kole-step-body 区域延续。",
|
||
"状态色令牌：--kole-color-brand 表进行中，--kole-color-error 表异常，--kole-color-border 表未到达。"
|
||
],
|
||
"bestPractices": [
|
||
"状态类必须加在 .kole-step 上而不是内部图标上，图标内部没有对应的状态选择器。",
|
||
"横向模式不要加 .kole-step-body，纵向模式的标题与描述才会跟随它换行排布。",
|
||
"四个状态类互斥，最后一个步骤不要同时保留 .is-wait 与 .is-finish。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-steps",
|
||
"type": "基础类",
|
||
"desc": "步骤条根容器（frameworks/Steps.css:3）"
|
||
},
|
||
{
|
||
"name": "kole-step",
|
||
"type": "结构类",
|
||
"desc": "单个步骤，状态类挂载点（frameworks/Steps.css:7）"
|
||
},
|
||
{
|
||
"name": "kole-step-icon",
|
||
"type": "结构类",
|
||
"desc": "序号/图标圆，伪元素画连接线（frameworks/Steps.css:10）"
|
||
},
|
||
{
|
||
"name": "kole-step-body",
|
||
"type": "结构类",
|
||
"desc": "纵向模式下承载标题与描述（frameworks/Steps.css:28）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"步骤是流程语义，建议宿主用有序列表或 role=list 承载，并把当前步通过 aria-current=step 播报。",
|
||
"状态不能只靠颜色区分（进行中/异常的色差对色觉障碍用户不友好），标题文字里应带上状态词。",
|
||
"序号圆形里的数字本身是文本，保持真实字符而非背景图。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Steps.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Steps.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"steps-ex-1",
|
||
"steps-ex-2"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Steps.css:3 定义 .kole-steps",
|
||
"依据 frameworks/Steps.css:7 定义 .kole-step",
|
||
"依据 frameworks/Steps.css:10 定义 .kole-step-icon",
|
||
"依据 frameworks/Steps.css:28 定义 .kole-step-body",
|
||
"类名总表来自 frameworks/Steps.css（facts.consumedApi.classes，12 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|