85 lines
3.6 KiB
JSON
85 lines
3.6 KiB
JSON
{
|
||
"slug": "breadcrumb",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 面包屑：脚本按数据生成项与分隔符，当前项用 is-current 类标记且不绑定跳转。",
|
||
"usage": [
|
||
"容器写 .kole-breadcrumb 与 role=\"navigation\"，并给出 id 让脚本把生成的项注入进去。",
|
||
"当前页加 .is-current 类（示例里由脚本按是否为最后一项判断），分隔符是独立的 .kole-breadcrumb-sep 节点。",
|
||
"可点项写 role=\"link\" 与 tabindex=\"0\" 补语义，脚本按 .kole-breadcrumb-item:not(.is-current) 选择器批量绑定点事件。",
|
||
"点击行为由页面自己决定，示例里是 alert(\"跳转到：\" + el.dataset.key)，真实项目替换成 location 或路由调用。"
|
||
],
|
||
"bestPractices": [
|
||
"示例的项是脚本生成的，项上要带 data-key 才能取到跳转目标；改成手写结构时请保留 data-key。",
|
||
"绑定事件时用 :not(.is-current) 过滤，否则点当前页也会触发跳转逻辑。",
|
||
"role=\"link\" 只是语义声明，Enter 键不会触发；要完整键盘可达请改用原生 <a>。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-breadcrumb、项与分隔符结构类、当前项 is-current）加 data-key 钩子与 role/tabindex 标注。",
|
||
"table": [
|
||
{
|
||
"name": "kole-breadcrumb",
|
||
"type": "基础类名",
|
||
"desc": "面包屑容器，需配 role=\"navigation\""
|
||
},
|
||
{
|
||
"name": "kole-breadcrumb-item",
|
||
"type": "结构类名",
|
||
"desc": "单个路径项，可点项带 role=\"link\" 与 tabindex=\"0\""
|
||
},
|
||
{
|
||
"name": "is-current",
|
||
"type": "状态类名",
|
||
"desc": "当前页项，脚本不给它绑跳转事件"
|
||
},
|
||
{
|
||
"name": "kole-breadcrumb-sep",
|
||
"type": "结构类名",
|
||
"desc": "项之间的分隔符节点"
|
||
},
|
||
{
|
||
"name": "data-key",
|
||
"type": "data-* 钩子",
|
||
"desc": "路径项的跳转标识，点击时读 dataset.key"
|
||
},
|
||
{
|
||
"name": "role",
|
||
"type": "原生属性",
|
||
"desc": "容器写 role=\"navigation\"、项写 role=\"link\"，补导航与链接语义"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"type": "原生属性",
|
||
"desc": "取值为 0，让路径项可以被 Tab 聚焦"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"容器带 role=\"navigation\"，但未给 aria-label，页面里存在多个导航时读屏器无法区分这是哪一组。",
|
||
"项用 role=\"link\" 与 tabindex=\"0\" 声明可点，但脚本只监听 click，Enter/空格不会触发跳转。",
|
||
"当前项用 .is-current 类表达，没有 aria-current=\"page\"，当前页语义缺失。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Breadcrumb.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Breadcrumb.html —— 纯 H5 演示页：容器加角色标注，脚本按数据生成项、分隔符并绑定点击"
|
||
},
|
||
{
|
||
"file": "frameworks/Breadcrumb.css",
|
||
"kind": "样式文件",
|
||
"desc": "Breadcrumb.css —— 本页组件类名的样式定义，由 Breadcrumb.html 第 8 行的 <link rel=\"stylesheet\" href=\"Breadcrumb.css\"> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"breadcrumb-ex-1"
|
||
],
|
||
"notes": [
|
||
"容器的导航语义标注见（frameworks/Breadcrumb.html:12）",
|
||
"当前项的类名判定见（frameworks/Breadcrumb.html:24）",
|
||
"分隔符结构类见（frameworks/Breadcrumb.html:25）",
|
||
"点击读取 data-key 的脚本见（frameworks/Breadcrumb.html:29）"
|
||
]
|
||
}
|