90 lines
3.9 KiB
JSON
90 lines
3.9 KiB
JSON
{
|
||
"slug": "alertmodal",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生 AlertModal：遮罩里放告警弹窗，按类型换图标标题后以 display:flex 弹出。",
|
||
"usage": [
|
||
"结构是 .kole-modal-mask（#mask）套 .kole-alert（#alertBox），头部 .kole-alert-head 里并排 .kole-alert-icon 与 .kole-alert-title。",
|
||
"四个入口按钮都带 data-type（info / success / error / warning），脚本用同一份 ICONS、TITLES 表决定图标字符与标题文案。",
|
||
"切类型不换节点：showAlert 直接写 box.className = \"kole-alert is-\" + type，靠 is-* 状态类接管配色。",
|
||
"显隐走 mask.style.display，弹出为 flex、关闭为 none，节点始终留在 DOM 里。",
|
||
"关闭有三个入口：底部 .kole-alert-btn（#ok）、遮罩自身 click 里判断 e.target === mask 的点击外部关闭。"
|
||
],
|
||
"bestPractices": [
|
||
"ICONS 与 TITLES 是写死的两张表，接真实业务时换成后端返回的文案，不要改类名拼装那两行。",
|
||
"遮罩 .kole-modal-mask 与弹窗 .kole-alert 是两层，关弹窗要同时处理遮罩，只隐藏 .kole-alert 会留一层灰罩。",
|
||
"is-* 是拼出来的状态类，新增类型前先确认 Alert.css 里有对应的 .is-<type> 规则。"
|
||
],
|
||
"a11y": [
|
||
"弹窗没有 role=\"dialog\" 也没有 aria-modal，读屏不会被告知进入了模态上下文。",
|
||
"打开时焦点不移入弹窗、关闭后也不归还给触发按钮，键盘用户打开后仍停在原按钮上。",
|
||
"图标是单个字符（✓ ✕ ! i）写在 .kole-alert-icon 里，读屏会念字符本身，宜加 aria-hidden 让标题承载语义。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有界面 API：类型与显隐靠 .kole-alert 上的 is-<type> 状态类、.kole-modal-mask 的 display，入口用 data-type 钩子标记，逻辑全在页内 showAlert 脚本里。",
|
||
"table": [
|
||
{
|
||
"name": "kole-alert",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/AlertModal.html:18）。"
|
||
},
|
||
{
|
||
"name": "kole-alert-btn",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/AlertModal.html:24）。"
|
||
},
|
||
{
|
||
"name": "kole-alert-content",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/AlertModal.html:23）。"
|
||
},
|
||
{
|
||
"name": "kole-alert-footer",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/AlertModal.html:24）。"
|
||
},
|
||
{
|
||
"name": "kole-alert-head",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/AlertModal.html:19）。"
|
||
},
|
||
{
|
||
"name": "kole-alert-icon",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/AlertModal.html:20）。"
|
||
},
|
||
{
|
||
"name": "kole-alert-title",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/AlertModal.html:21）。"
|
||
},
|
||
{
|
||
"name": "kole-modal-mask",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/AlertModal.html:17）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/AlertModal.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/AlertModal.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"alertmodal-ex-1"
|
||
],
|
||
"notes": [
|
||
"弹窗结构见（frameworks/AlertModal.html:17-24），入口按钮带 data-type 见（frameworks/AlertModal.html:15）。",
|
||
"类名拼装见（frameworks/AlertModal.html:34），显隐见（frameworks/AlertModal.html:37）。",
|
||
"点遮罩关闭见（frameworks/AlertModal.html:44）。"
|
||
]
|
||
}
|