95 lines
4.8 KiB
JSON
95 lines
4.8 KiB
JSON
{
|
||
"slug": "alertmodal",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 alertmodal：.kole-modal-mask 做居中遮罩，.kole-alert 是 380px 宽的提示卡本体。",
|
||
"usage": [
|
||
"整体是两层：外层 .kole-modal-mask 固定全屏、z-index 2000 并用 flex 把卡片居中（frameworks/AlertModal.css:3）。",
|
||
"卡片本体 .kole-alert 定宽 380px、max-width 90vw，圆角 8px 加投影，是撑起视觉的那一层（frameworks/AlertModal.css:4）。",
|
||
"四种类型只影响图标底色：.kole-alert.is-success / .is-error / .is-warning / .is-info 分别给 .kole-alert-icon 上色（frameworks/AlertModal.css:8-11）。",
|
||
"结构按 头/正文/脚 三段给类：.kole-alert-head 横向排图标与标题，.kole-alert-content 缩进 34px 对齐标题，.kole-alert-footer 右对齐放按钮（frameworks/AlertModal.css:6、13-14）。",
|
||
"底部按钮用 .kole-alert-btn，蓝色实底加白字，hover 切到 --kole-color-brand-hover（frameworks/AlertModal.css:15-16）。"
|
||
],
|
||
"bestPractices": [
|
||
"遮罩不负责居中之外的定位：卡片宽度 380px / 90vw 上限都写在 .kole-alert 上，改宽度改这一条而不是外层（frameworks/AlertModal.css:4）。",
|
||
"图标 22px 圆形底且 flex-shrink:0，标题多行折行时图标不会被压扁（frameworks/AlertModal.css:7）。",
|
||
"正文的 margin-inline-start:34px 是给图标让位的缩进，图标尺寸一改这里要同步，否则正文与标题对不齐（frameworks/AlertModal.css:13）。"
|
||
],
|
||
"a11y": [
|
||
"图标底色是类型唯一的视觉差异，颜色不能替代文字：类型信息要写在 .kole-alert-title 或 .kole-alert-content 里（frameworks/AlertModal.css:8-11）。",
|
||
"图标是纯装饰元素（22px 圆内放字符），建议置于 aria-hidden 或给可读替代文本，避免读屏重复朗读（frameworks/AlertModal.css:7）。",
|
||
"遮罩层本身没有焦点环规则，键盘可达性依赖卡片内 .kole-alert-btn 等可聚焦元素；请勿用 div 冒充按钮（frameworks/AlertModal.css:15）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-modal-mask（遮罩）与 .kole-alert（卡片）两个根类，加上 .kole-alert-head / -icon / -title / -content / -footer / -btn 的结构类，类型由 is-success / is-error / is-warning / is-info 表达。",
|
||
"table": [
|
||
{
|
||
"name": "kole-modal-mask",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/AlertModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/AlertModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-head",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/AlertModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-icon",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/AlertModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-success",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/AlertModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-error",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/AlertModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-warning",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/AlertModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-info",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/AlertModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/AlertModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-content",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/AlertModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/AlertModal.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"alertmodal-ex-1"
|
||
],
|
||
"notes": [
|
||
"遮罩见 frameworks/AlertModal.css:3，卡片见 frameworks/AlertModal.css:4，图标类型色见 frameworks/AlertModal.css:8-11。",
|
||
"该文件复用了 kole-alert 前缀（不是 kole-alertmodal），类名以源码为准，不要按组件名拼。",
|
||
"契约的 type 维度在 css 端由 is-* 类承担，未写成属性。"
|
||
]
|
||
}
|