112 lines
4.4 KiB
JSON
112 lines
4.4 KiB
JSON
{
|
||
"slug": "collapse",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 折叠面板：is-open 类与内容 hidden 双状态同步，手风琴靠 data-accordion 开启。",
|
||
"usage": [
|
||
"每个面板是 .kole-collapse-item 加 .kole-collapse-header 与 .kole-collapse-content 两段，收起时内容加 hidden。",
|
||
"面板头写 role=\"button\" 与 tabindex=\"0\" 补语义，箭头是独立节点 .kole-collapse-arrow，展开时随 .is-open 旋转。",
|
||
"手风琴能力用属性存在性声明：容器加 data-accordion，脚本据此在展开时收起同级其它面板。",
|
||
"交互统一在容器上做事件委托：点击后先判断项是否带 is-disabled，再 toggle is-open 并同步内容的 hidden。"
|
||
],
|
||
"bestPractices": [
|
||
"展开是两处状态同步：项的 .is-open 与内容的 hidden 必须一起改，只改一处会出现「箭头转了内容没出」。",
|
||
"手风琴模式要遍历同级其它 .is-open 项一起收起，别只处理被点的那一个。",
|
||
"面板头有 role=\"button\" 但没有键盘事件，若要键盘可达请补 keydown 处理 Enter 与空格。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-collapse 容器与面板头/箭头/内容结构类、is-open 与 is-disabled 状态类）加 data-accordion 能力钩子，展开由容器级事件委托处理。",
|
||
"table": [
|
||
{
|
||
"name": "kole-collapse",
|
||
"type": "基础类名",
|
||
"desc": "折叠面板容器，脚本据此做事件委托"
|
||
},
|
||
{
|
||
"name": "kole-collapse-item",
|
||
"type": "结构类名",
|
||
"desc": "单个面板，展开时加 is-open"
|
||
},
|
||
{
|
||
"name": "is-open",
|
||
"type": "状态类名",
|
||
"desc": "展开态，写在面板项上，同时驱动箭头的旋转"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "状态类名",
|
||
"desc": "禁用面板，点击时脚本直接跳过"
|
||
},
|
||
{
|
||
"name": "kole-collapse-header",
|
||
"type": "结构类名",
|
||
"desc": "面板头，带 role=\"button\" 与 tabindex=\"0\""
|
||
},
|
||
{
|
||
"name": "kole-collapse-arrow",
|
||
"type": "结构类名",
|
||
"desc": "展开箭头（▶），展开时随 is-open 旋转"
|
||
},
|
||
{
|
||
"name": "kole-collapse-title",
|
||
"type": "结构类名",
|
||
"desc": "面板标题文本"
|
||
},
|
||
{
|
||
"name": "kole-collapse-content",
|
||
"type": "结构类名",
|
||
"desc": "内容区，收起时加 hidden"
|
||
},
|
||
{
|
||
"name": "data-accordion",
|
||
"type": "data-* 钩子",
|
||
"desc": "存在即手风琴模式，展开时收起同级其它面板"
|
||
},
|
||
{
|
||
"name": "hidden",
|
||
"type": "原生属性",
|
||
"desc": "内容区显隐，必须与 is-open 同步切换"
|
||
},
|
||
{
|
||
"name": "role",
|
||
"type": "原生属性",
|
||
"desc": "面板头写 role=\"button\" 补按钮语义"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"type": "原生属性",
|
||
"desc": "取值为 0，让面板头可聚焦"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"面板头有 role=\"button\" 与 tabindex=\"0\"，但缺少 aria-expanded / aria-controls，读屏器无法得知展开状态与关联内容。",
|
||
"示例没有给面板头绑定 keydown，Enter 与空格不会展开内容，键盘可达性不完整。",
|
||
"内容区是普通 div，没有 role=\"region\"，也没有与头部建立可访问关联。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Collapse.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Collapse.html —— 纯 H5 演示页：手风琴与非手风琴两组结构，含事件委托脚本负责展开与隐藏同步"
|
||
},
|
||
{
|
||
"file": "frameworks/Collapse.css",
|
||
"kind": "样式文件",
|
||
"desc": "Collapse.css —— 本页组件类名的样式定义，由 Collapse.html 第 8 行的 <link rel=\"stylesheet\" href=\"Collapse.css\"> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"collapse-ex-1",
|
||
"collapse-ex-2"
|
||
],
|
||
"notes": [
|
||
"手风琴能力声明见（frameworks/Collapse.html:24）",
|
||
"展开态切换见（frameworks/Collapse.html:67）",
|
||
"内容区 hidden 与展开态同步，见（frameworks/Collapse.html:69）",
|
||
"手风琴模式下收起同级其它面板，见（frameworks/Collapse.html:72）",
|
||
"面板头语义标注见（frameworks/Collapse.html:26）"
|
||
]
|
||
}
|