100 lines
4.1 KiB
JSON
100 lines
4.1 KiB
JSON
{
|
||
"slug": "fullscreenmodal",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生全屏模态：一个遮罩 display:flex 铺满，头身脚三段类名，无外部脚本。",
|
||
"usage": [
|
||
"遮罩 .kole-fs-mask（#mask）初始 style=\"display:none\"，打开时写 flex，关闭写回 none。",
|
||
"三段是 .kole-fs-head（含 .kole-fs-title 与 .kole-fs-close）、.kole-fs-body、.kole-fs-foot。",
|
||
"操作按钮用通用按钮类 .kole-btn，主按钮叠 .kole-btn--primary，不额外定义 fs 专用按钮类。",
|
||
"关闭函数只有一个 close()（frameworks/FullScreenModal.html:44），三个按钮（#close / #cancel / #ok）都指向它。"
|
||
],
|
||
"bestPractices": [
|
||
"三个关闭入口共用一个 close()，接业务时若确定要提交、取消要回滚，必须把这一个函数拆成两条路径。",
|
||
"打开只写 display:flex，没有禁止背景滚动，长内容页面打开后仍能滚到底层。",
|
||
"按钮用的是通用 .kole-btn，改动它会影响页面上所有按钮，别在这里加特例样式。"
|
||
],
|
||
"a11y": [
|
||
"遮罩没有 role=\"dialog\" 也没有 aria-modal，读屏不会识别为模态上下文。",
|
||
"没有焦点陷阱与 Escape 关闭，键盘用户 Tab 会跑到遮罩后面的内容上。",
|
||
"关闭按钮 .kole-fs-close 需要确认可读文案（示例内容取决于 HTML，若只是 ✕ 需补 aria-label）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端的载体是类名加内联 display：.kole-fs-mask 遮罩、-head / -body / -foot 三段、-title 标题、-close 关闭，按钮复用通用 .kole-btn 与 .kole-btn--primary，开合由页内一段脚本切换 display。",
|
||
"table": [
|
||
{
|
||
"name": "kole-btn",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FullScreenModal.html:16）。"
|
||
},
|
||
{
|
||
"name": "kole-btn--primary",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FullScreenModal.html:16）。"
|
||
},
|
||
{
|
||
"name": "kole-demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FullScreenModal.html:15）。"
|
||
},
|
||
{
|
||
"name": "kole-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FullScreenModal.html:13）。"
|
||
},
|
||
{
|
||
"name": "kole-fs-body",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FullScreenModal.html:25）。"
|
||
},
|
||
{
|
||
"name": "kole-fs-close",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FullScreenModal.html:23）。"
|
||
},
|
||
{
|
||
"name": "kole-fs-foot",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FullScreenModal.html:32）。"
|
||
},
|
||
{
|
||
"name": "kole-fs-head",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FullScreenModal.html:21）。"
|
||
},
|
||
{
|
||
"name": "kole-fs-mask",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FullScreenModal.html:20）。"
|
||
},
|
||
{
|
||
"name": "kole-fs-title",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/FullScreenModal.html:22）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/FullScreenModal.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/FullScreenModal.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"fullscreenmodal-ex-1",
|
||
"fullscreenmodal-ex-2"
|
||
],
|
||
"notes": [
|
||
"遮罩与三段结构见（frameworks/FullScreenModal.html:20-32）。",
|
||
"打开写 display:flex 见（frameworks/FullScreenModal.html:40），close 定义见（frameworks/FullScreenModal.html:44），三个关闭入口见（frameworks/FullScreenModal.html:41-43）。",
|
||
"按钮类名见（frameworks/FullScreenModal.html:16）。"
|
||
]
|
||
}
|