97 lines
5.3 KiB
JSON
97 lines
5.3 KiB
JSON
{
|
||
"slug": "alert",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 alert：.kole-alert-alert 是提示条本体，配套 .kole-alert-desc 说明与 .kole-alert-close 关闭按钮。",
|
||
"usage": [
|
||
"提示条本体用 .kole-alert-alert，它自带 flex 对齐、1px 边框、圆角和 --kole-color-brand-bg 底色（frameworks/Alert.css:50）。",
|
||
"状态色叠在同一个元素上：is-success 走 --kole-color-tag-green-bg，is-warning 与 is-error 用 color-mix 把警告/错误色按 10% 混进卡片底色（frameworks/Alert.css:51-53）。",
|
||
"正文与标题分开写：标题 .kole-alert-title 用 --kole-color-text-title 加粗，说明文字 .kole-alert-desc 用 --kole-color-text-secondary 与小号字（frameworks/Alert.css:5-6）。",
|
||
"关闭按钮用 .kole-alert-close，它靠 margin-inline-start:auto 贴到行尾，自身无边框透明底（frameworks/Alert.css:54）。",
|
||
"要更紧凑的排布加 .kole-alert-compact，它把内边距收到 --kole-space-4/--kole-space-8 并降字号（frameworks/Alert.css:12）。",
|
||
"禁用态加 .kole-alert-disabled，或直接给内部 button 加 [disabled] 属性，两者都渲染成 not-allowed 加 0.55 透明度（frameworks/Alert.css:13）。"
|
||
],
|
||
"bestPractices": [
|
||
"四种状态只应出现一个：is-success / is-warning / is-error / is-info 都是覆盖 background 的平级选择器，同时挂两个时后写的规则赢（frameworks/Alert.css:51-53）。",
|
||
"焦点样式已由 .kole-alert button:focus-visible 等统一给出 2px 品牌色 outline 加 2px 偏移，改外观时别把它一起抹掉（frameworks/Alert.css:9）。",
|
||
"状态底色用的是 color-mix，浏览器需支持 color-mix() 才能得到正确的淡色底；不支持时只有底色参与，不会崩但颜色偏纯（frameworks/Alert.css:52）。"
|
||
],
|
||
"a11y": [
|
||
"关闭按钮是本文件里唯一自带焦点环的交互元素（.kole-alert a:focus-visible / .kole-alert-control:focus-visible），放 button 时请给它可读文本或 aria-label（frameworks/Alert.css:9 与 54）。",
|
||
"is-success / is-warning / is-error 只改背景色，颜色本身不构成无障碍信息，状态必须另有文字（frameworks/Alert.css:51-53）。",
|
||
"提示条内部的 button、a、input、select 统一 font:inherit，字号跟随上下文而不是浏览器默认（frameworks/Alert.css:7）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-alert 根类下的语义类 —— .kole-alert-alert（条本体）、.kole-alert-title / .kole-alert-desc（文案层级）、.kole-alert-close（关闭）、.kole-alert-compact（紧凑），状态由 is-success / is-warning / is-error / is-info 表达。",
|
||
"table": [
|
||
{
|
||
"name": "kole-alert",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Alert.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Alert.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Alert.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Alert.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Alert.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Alert.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Alert.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Alert.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Alert.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-alert-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Alert.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Alert.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"alert-ex-1",
|
||
"alert-ex-2"
|
||
],
|
||
"notes": [
|
||
"条本体样式见 frameworks/Alert.css:50，状态覆盖见 frameworks/Alert.css:51-53，关闭按钮见 frameworks/Alert.css:54。",
|
||
"契约的驱动维度（type）在 css 端不落成属性，改由 is-* 状态类表达；本页未把它写成 prop。",
|
||
"frameworks/Alert.css 与 Avatar/Badge/Container 等 20 个文件除首行组件名外逐行相同，是同一份生成骨架；本页只讲该骨架里 alert 语义的那几行。"
|
||
]
|
||
}
|