100 lines
4.1 KiB
JSON
100 lines
4.1 KiB
JSON
{
|
||
"slug": "steplist",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生步骤条：状态拼成 is-<status> 类，横向切换靠换根节点上的 is-horizontal。",
|
||
"usage": [
|
||
"每一步是 .kole-steplist-item 叠 is-<status>（done / active / pending / error）再叠 is-clickable，节点文字由 nodeText 决定（完成 ✓、失败 ✕、其余写序号）。",
|
||
"横向与纵向不改结构：render() 读 #dir 的值后重写根类名 root.className = \"kole-steplist\" + (dir === \"horizontal\" ? \" is-horizontal\" : \"\")。",
|
||
"每步的连线是独立的 .kole-steplist-line 元素，跟着 item 一起渲染，不是伪元素。",
|
||
"方向切换绑定在 #dir 的 change 上，是整块重渲染。",
|
||
"步骤点击只有 alert 占位（frameworks/StepList.html:56），没有真实跳转。"
|
||
],
|
||
"bestPractices": [
|
||
"root.className 是整体赋值，会清掉根节点上其他类，接入时改用 classList.toggle。",
|
||
"状态取值只认 done / active / pending / error 四种，写别的会拼出无样式的类名。",
|
||
"横向与纵向共用同一份 DOM 顺序，靠样式转向，所以数据结构不需要动。"
|
||
],
|
||
"a11y": [
|
||
"根与每个节点都写了 role=\"list\"，但列表项不是 role=\"listitem\"，list 角色的子项要求不满足。",
|
||
"步骤项带 is-clickable 且绑了 click，键盘却无法触发（没有 tabindex 与按键处理）。",
|
||
"当前步只用颜色与缓存区分，没有 aria-current=\"step\"，读屏不知道进行到哪一步。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端是状态类加节点类名：.kole-steplist 根（叠 is-horizontal 转横向）、.kole-steplist-item 叠 is-<status> 与 is-clickable、-node / -line / -body / -title / -desc 分件，方向切换走页内 change 重渲染。",
|
||
"table": [
|
||
{
|
||
"name": "is-clickable",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/StepList.html:49）。"
|
||
},
|
||
{
|
||
"name": "kole-demo-panel",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/StepList.html:13）。"
|
||
},
|
||
{
|
||
"name": "kole-demo-toolbar",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/StepList.html:11）。"
|
||
},
|
||
{
|
||
"name": "kole-steplist",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/StepList.html:26）。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-body",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/StepList.html:52）。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/StepList.html:53）。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-item",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/StepList.html:49）。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-line",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/StepList.html:51）。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-node",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/StepList.html:50）。"
|
||
},
|
||
{
|
||
"name": "kole-steplist-title",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/StepList.html:52）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/StepList.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/StepList.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"steplist-ex-1"
|
||
],
|
||
"notes": [
|
||
"根类名切换见（frameworks/StepList.html:47），条目模板与状态类见（frameworks/StepList.html:49-53）。",
|
||
"节点文字规则见（frameworks/StepList.html:38-42），点击占位见（frameworks/StepList.html:56）。",
|
||
"方向控件见（frameworks/StepList.html:59-60）。"
|
||
]
|
||
}
|