96 lines
3.9 KiB
JSON
96 lines
3.9 KiB
JSON
{
|
||
"slug": "bottomsheet",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 底部弹层：is-open 类同时加到遮罩与面板，下滑手势在 pointerup 时判定关闭。",
|
||
"usage": [
|
||
"结构是 .kole-sheet-mask 遮罩加 .kole-sheet 面板，两者都靠 .is-open 类进出场，示例用 open() / close() 两个函数同时改两处类名。",
|
||
"面板自上而下分四段：.kole-sheet-header（含标题）、.kole-sheet-body、.kole-sheet-footer 与按钮 .kole-sheet-btn，确认按钮叠加 primary。",
|
||
"下滑关闭在面板上监听 pointerdown 记起始 Y，pointerup 比较结束位置，位移超过阈值就调 close()。",
|
||
"打开与关闭都靠 classList.add/remove(\"is-open\")，示例的入口是一个按钮的点击。"
|
||
],
|
||
"bestPractices": [
|
||
"遮罩与面板的 is-open 必须成对增删：只改一处会出现「遮罩还在但面板已收」的半开状态。",
|
||
"手势只比较按下与抬起两个点，拖动过程没有实时跟随：需要跟手效果要自己加 pointermove 并改 transform。",
|
||
"面板会被裁切或错位：示例把遮罩与面板放在页面根层级，避免被父级 overflow 影响。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-sheet-mask / .kole-sheet 面板与头部、主体、底部、按钮、把手结构类、is-open 状态类）加页内 open() / close() 函数与 pointer 手势脚本。",
|
||
"table": [
|
||
{
|
||
"name": "kole-sheet-mask",
|
||
"type": "结构类名",
|
||
"desc": "遮罩层，与面板一起加 is-open"
|
||
},
|
||
{
|
||
"name": "kole-sheet",
|
||
"type": "基础类名",
|
||
"desc": "底部面板本体，is-open 时滑入"
|
||
},
|
||
{
|
||
"name": "is-open",
|
||
"type": "状态类名",
|
||
"desc": "打开态，遮罩与面板必须同步增删"
|
||
},
|
||
{
|
||
"name": "kole-sheet-handle",
|
||
"type": "结构类名",
|
||
"desc": "顶部把手，手势关闭的视觉暗示"
|
||
},
|
||
{
|
||
"name": "kole-sheet-header",
|
||
"type": "结构类名",
|
||
"desc": "标题区容器"
|
||
},
|
||
{
|
||
"name": "kole-sheet-body",
|
||
"type": "结构类名",
|
||
"desc": "主体内容区"
|
||
},
|
||
{
|
||
"name": "kole-sheet-footer",
|
||
"type": "结构类名",
|
||
"desc": "底部按钮区"
|
||
},
|
||
{
|
||
"name": "kole-sheet-btn",
|
||
"type": "结构类名",
|
||
"desc": "底部按钮，确认按钮叠加 primary"
|
||
},
|
||
{
|
||
"name": "primary",
|
||
"type": "修饰类名",
|
||
"desc": "与 .kole-sheet-btn 组合表示主操作"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"遮罩与面板都缺少 role=\"dialog\" 与 aria-modal，读屏器不会把这块识别为弹层。",
|
||
"没有焦点圈定与 Esc 关闭：打开后焦点不移动，键盘用户只能通过页面上的按钮关闭。",
|
||
"下滑关闭是纯指针手势，键盘与读屏器用户不可用；请确保页面另有关闭按钮。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/BottomSheet.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "BottomSheet.html —— 纯 H5 演示页：遮罩与面板结构，含 open/close 与下滑手势脚本"
|
||
},
|
||
{
|
||
"file": "frameworks/BottomSheet.css",
|
||
"kind": "样式文件",
|
||
"desc": "BottomSheet.css —— 本页组件类名的样式定义，由 BottomSheet.html 第 8 行的 <link rel=\"stylesheet\" href=\"BottomSheet.css\"> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"bottomsheet-ex-1",
|
||
"bottomsheet-ex-2"
|
||
],
|
||
"notes": [
|
||
"开合同时改遮罩与面板两处类名，见（frameworks/BottomSheet.html:30）",
|
||
"下滑手势的起点监听见（frameworks/BottomSheet.html:38）",
|
||
"手势结束时的关闭判定见（frameworks/BottomSheet.html:39）",
|
||
"顶部把手节点见（frameworks/BottomSheet.html:16）"
|
||
]
|
||
}
|