101 lines
4.1 KiB
JSON
101 lines
4.1 KiB
JSON
{
|
|
"slug": "alert",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生 Alert：一段 role=\"alert\" 的告警条加原生关闭按钮，隐藏整条的逻辑要自己接。",
|
|
"usage": [
|
|
"整页只有 6 行：.kole-alert 是行容器，真正有样式的是里面的 .kole-alert-alert 告警条。",
|
|
"告警条用 role=\"alert\" 声明语义，主文案写在 <strong> 里，次要说明放进 .kole-alert-desc。",
|
|
"关闭按钮是原生 <button type=\"button\">，带 aria-label=\"关闭\" 与 data-close 钩子，脚本按 .kole-alert [data-close] 选中它。",
|
|
"示例的关闭只有一句：this.closest(\".kole-alert-alert\").hidden = true，即整条隐藏而不是移出 DOM。",
|
|
".kole-alert-surface 是留给自定义内容的浅底容器，示例直接内联 style=\"padding:12px\" 撑开。"
|
|
],
|
|
"bestPractices": [
|
|
"关闭是演示脚本，真实页面要在 data-close 的 click 里接自己的业务回调（例如通知服务端已读）。",
|
|
"隐藏用 hidden 属性而不是删节点：同页还有后续告警时 DOM 顺序不会跳。",
|
|
"别把 role=\"alert\" 挂到 .kole-alert 外层，语义在 .kole-alert-alert 上，挂错层读屏会整块播报。"
|
|
],
|
|
"a11y": [
|
|
"role=\"alert\" 只在动态插入告警条时才有播报意义，静态展示的示例不必再加 aria-live。",
|
|
"关闭按钮有 aria-label=\"关闭\" 且是原生 button，回车空格都能触发；换成 div 加类名就会丢掉键盘。",
|
|
"主文案用 <strong> 强调，语义比纯样式加粗更明确。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端没有 props：契约面是 .kole-alert 家族类名（.kole-alert-alert 告警条、.kole-alert-desc 说明、.kole-alert-close 关闭按钮）加 data-close 钩子，关闭行为由页内脚本实现。",
|
|
"table": [
|
|
{
|
|
"name": "demo",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Alert.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-block",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Alert.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-note",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Alert.html:5）。"
|
|
},
|
|
{
|
|
"name": "kole-alert",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Alert.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-alert-alert",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Alert.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-alert-close",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Alert.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-alert-desc",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Alert.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-alert-surface",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Alert.html:6）。"
|
|
},
|
|
{
|
|
"name": "row",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Alert.html:5）。"
|
|
},
|
|
{
|
|
"name": "sub",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Alert.html:5）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/Alert.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/Alert.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"alert-ex-1",
|
|
"alert-ex-2"
|
|
],
|
|
"notes": [
|
|
"结构与内联脚本同在第 6 行（frameworks/Alert.html:6），整页只有 6 行，没有任何外部 JS。",
|
|
"关闭脚本见（frameworks/Alert.html:6）：querySelector(\".kole-alert [data-close]\") 后 hidden = true。",
|
|
"样式依据：.kole-alert-alert 在 frameworks/Alert.css:50、.kole-alert-close 在 frameworks/Alert.css:54、.kole-alert-desc 在 frameworks/Alert.css:6。"
|
|
]
|
|
}
|