134 lines
5.0 KiB
JSON
134 lines
5.0 KiB
JSON
{
|
||
"slug": "tabs",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 标签页：data-key 与 data-panel 配对，切换时同改 is-active 与 hidden。",
|
||
"usage": [
|
||
"一个 .kole-tabs 容器配 data-tabs 初始化，导航区 .kole-tabs-nav 带 role=\"tablist\"，标签是带 data-key 的 div。",
|
||
"面板区用 [data-panels] 容器加若干 [data-panel=\"key\"]，键值与标签的 data-key 一一对应，切换时脚本一并改 hidden。",
|
||
"切换同时做两件事：给目标标签加 .is-active、把对应面板的 hidden 去掉，两处都要照顾到。",
|
||
"禁用标签加 .is-disabled，脚本在 activate 前先判断 is-disabled 就不处理点击。",
|
||
"关闭与新增是动态 DOM 操作：关闭按钮带 data-close 并 remove 掉所在标签，新增按钮带 data-add 用 createElement 插到导航里并同步补一个面板。"
|
||
],
|
||
"bestPractices": [
|
||
"删除当前激活标签后必须重新 activate 第一个标签，否则会留下没有 .is-active 也没有可见面板的空档。",
|
||
"新增标签时要同时补 data-panel 面板并立刻 activate 新 key，只加标签会出现点了没内容。",
|
||
"type 只作为容器上的视觉类（type-line / type-card / type-pill），不参与交互逻辑，换类型不影响脚本。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-tabs 加 type-<type>、标签 is-active / is-disabled、面板 hidden）与 data-* 配对钩子（data-tabs、data-key、data-panel、data-close、data-add）。",
|
||
"table": [
|
||
{
|
||
"name": "kole-tabs",
|
||
"type": "基础类名",
|
||
"desc": "标签页根容器，可叠加 type-line / type-card / type-pill"
|
||
},
|
||
{
|
||
"name": "type-line",
|
||
"type": "变体类名",
|
||
"desc": "线型样式"
|
||
},
|
||
{
|
||
"name": "type-card",
|
||
"type": "变体类名",
|
||
"desc": "卡片型样式"
|
||
},
|
||
{
|
||
"name": "type-pill",
|
||
"type": "变体类名",
|
||
"desc": "胶囊型样式"
|
||
},
|
||
{
|
||
"name": "kole-tabs-nav",
|
||
"type": "结构类名",
|
||
"desc": "导航区容器，带 role=\"tablist\""
|
||
},
|
||
{
|
||
"name": "kole-tabs-tab",
|
||
"type": "结构类名",
|
||
"desc": "单个标签，可叠加 is-active / is-disabled"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "状态类名",
|
||
"desc": "当前激活标签"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "状态类名",
|
||
"desc": "禁用标签，点击不切换"
|
||
},
|
||
{
|
||
"name": "kole-tabs-content",
|
||
"type": "结构类名",
|
||
"desc": "面板区容器，脚本按 [data-panels] 定位"
|
||
},
|
||
{
|
||
"name": "kole-tabs-close",
|
||
"type": "结构类名",
|
||
"desc": "标签上的关闭按钮，带 data-close"
|
||
},
|
||
{
|
||
"name": "kole-tabs-add",
|
||
"type": "结构类名",
|
||
"desc": "导航末尾的新增按钮，带 data-add"
|
||
},
|
||
{
|
||
"name": "data-tabs",
|
||
"type": "data-* 钩子",
|
||
"desc": "标记标签页根节点，脚本据此批量初始化"
|
||
},
|
||
{
|
||
"name": "data-key",
|
||
"type": "data-* 钩子",
|
||
"desc": "标签的键值，与面板的 data-panel 对齐"
|
||
},
|
||
{
|
||
"name": "data-panel",
|
||
"type": "data-* 钩子",
|
||
"desc": "面板的键值，非当前项加 hidden"
|
||
},
|
||
{
|
||
"name": "data-add",
|
||
"type": "data-* 钩子",
|
||
"desc": "新增按钮标识"
|
||
},
|
||
{
|
||
"name": "hidden",
|
||
"type": "原生属性",
|
||
"desc": "面板显隐，与标签的 is-active 需同步切换"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"导航区带 role=\"tablist\"、标签带 role=\"tab\" 与 tabindex=\"0\"，语义基本齐备，但缺少 aria-selected 变化与方向键支持。",
|
||
"面板没有 role=\"tabpanel\"，也没有与标签建立 aria-controls 关联。",
|
||
"切换只由 click 驱动：没有监听方向键与 Enter，键盘用户无法在标签间移动。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Tabs.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Tabs.html —— 纯 H5 演示页：线型/卡片型/胶囊型三组结构，含 50 行负责切换、关闭与新增的脚本"
|
||
},
|
||
{
|
||
"file": "frameworks/Tabs.css",
|
||
"kind": "样式文件",
|
||
"desc": "Tabs.css —— 本页组件类名的样式定义，由 Tabs.html 第 8 行的 <link rel=\"stylesheet\" href=\"Tabs.css\"> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"tabs-ex-1",
|
||
"tabs-ex-2",
|
||
"tabs-ex-3"
|
||
],
|
||
"notes": [
|
||
"导航区的 role 标注见（frameworks/Tabs.html:26）",
|
||
"面板键值与标签 data-key 的配对见（frameworks/Tabs.html:33）",
|
||
"激活态切换逻辑见（frameworks/Tabs.html:83）",
|
||
"关闭按钮的钩子与移除逻辑见（frameworks/Tabs.html:46）",
|
||
"新增标签的按钮与插入逻辑见（frameworks/Tabs.html:48）"
|
||
]
|
||
}
|