101 lines
4.2 KiB
JSON
101 lines
4.2 KiB
JSON
{
|
||
"slug": "drawer",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生 Drawer：aside 加 role=\"dialog\" 从侧向滑出，显隐只切 hidden 属性。",
|
||
"usage": [
|
||
"抽屉本体是 <aside class=\"kole-drawer-drawer\" hidden role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"kole-drawer-title\">，语义标签加 ARIA 一起用。",
|
||
"标题 id 与 aria-labelledby 对应：<h3 id=\"kole-drawer-title\">，改标题时两处要一起改。",
|
||
"显隐只切 hidden：data-open 打开时 drawer.hidden = false 与 mask.hidden = false，关闭时双双置 true。",
|
||
"遮罩 .kole-drawer-drawer-mask 自己带 data-mask，点它调 closeDrawer。",
|
||
"四个钩子分工明确：data-open 打开、data-mask 点遮罩关、data-close 取消、data-confirm 确定，关闭函数是同一个。"
|
||
],
|
||
"bestPractices": [
|
||
"确定与取消调的是同一个 closeDrawer，业务逻辑要自己插进 data-confirm 那条路径。",
|
||
"脚本用 document.querySelector(\".kole-drawer-drawer\") 取第一个抽屉，同页多个抽屉必须换成 id 或作用域查询。",
|
||
"hidden 属性会连样式一起隐藏，别再用 display 覆盖它，二者混用会出现关不掉的情况。"
|
||
],
|
||
"a11y": [
|
||
"aside 加 role=\"dialog\" 与 aria-modal=\"true\"，读屏会当成模态对话框，这是本端少见的完整语义。",
|
||
"aria-labelledby 指向真实存在的标题 id，读屏进入时会读出「编辑资料」。",
|
||
"没有焦点管理：打开后焦点不进入抽屉、关闭不归还，也没有 Escape 关闭，键盘用户仍需自己 Tab。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props：显隐是 .kole-drawer-drawer 与遮罩上的 hidden 属性，入口用 data-open / data-mask / data-close / data-confirm 四个钩子标记，开合全在同一段页内脚本里。",
|
||
"table": [
|
||
{
|
||
"name": "demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Drawer.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-block",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Drawer.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-note",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Drawer.html:5）。"
|
||
},
|
||
{
|
||
"name": "kole-drawer",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Drawer.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-button",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Drawer.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Drawer.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-drawer",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Drawer.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-drawer-footer",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Drawer.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-drawer-mask",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Drawer.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-primary",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Drawer.html:6）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Drawer.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Drawer.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"drawer-ex-1",
|
||
"drawer-ex-2"
|
||
],
|
||
"notes": [
|
||
"抽屉与遮罩结构见（frameworks/Drawer.html:6），role / aria-modal / aria-labelledby 同在这一行。",
|
||
"closeDrawer 与四个钩子绑定见（frameworks/Drawer.html:6），整页脚本只有这一处。",
|
||
"页内脚本用 querySelector 取首个 .kole-drawer-drawer，多实例需自行改作用域（frameworks/Drawer.html:6）。"
|
||
]
|
||
}
|