97 lines
5.1 KiB
JSON
97 lines
5.1 KiB
JSON
{
|
||
"slug": "confirmmodal",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 confirmmodal：.kole-modal-mask 居中遮罩，.kole-confirm 是 400px 弹体，is-danger 只染图标。",
|
||
"usage": [
|
||
"遮罩 .kole-modal-mask 固定全屏、z-index 2000，用 flex 把弹体居中（frameworks/ConfirmModal.css:3）。",
|
||
"弹体 .kole-confirm 定宽 400px、上限 90vw、8px 圆角，是唯一的容器层（frameworks/ConfirmModal.css:4）。",
|
||
"语义类型只影响图标底色：.kole-confirm.is-danger 走错误色、.is-primary 走品牌色（frameworks/ConfirmModal.css:8-9）。",
|
||
"底部按钮的主色是用独立类给的：在 .kole-confirm-btn 上再加 .primary 或 .danger，与弹体上的 is-* 是两套（frameworks/ConfirmModal.css:16、18）。",
|
||
"按钮禁用态由原生 :disabled 伪类承接，降到 0.6 透明度并改 not-allowed 光标（frameworks/ConfirmModal.css:20）。",
|
||
"结构四段：.kole-confirm-head 横排图标与标题、-title、-content 缩进 34px 对齐标题、-extra 承载补充说明、-footer 右对齐按钮（frameworks/ConfirmModal.css:6、10-13）。"
|
||
],
|
||
"bestPractices": [
|
||
"类型色在弹体、按钮色在按钮，两处要分别写：只加 .kole-confirm.is-danger 不会让按钮变红（frameworks/ConfirmModal.css:8、18）。",
|
||
"正文的 margin-inline-start:34px 是为 22px 图标让位的缩进，图标尺寸一改这里要同步（frameworks/ConfirmModal.css:13）。",
|
||
"danger 按钮的 hover 底色与静态底色同为 --kole-color-error（frameworks/ConfirmModal.css:18-19），悬停只有文字色变化，需要更强反馈得自己加。"
|
||
],
|
||
"a11y": [
|
||
"遮罩与弹体都没有现成的 role，建议补 role=\"dialog\" 与 aria-modal，并让焦点进入弹体（frameworks/ConfirmModal.css:3-4）。",
|
||
"危险操作的颜色提示需配文字，is-danger 只染图标底色，颜色本身不构成无障碍信息（frameworks/ConfirmModal.css:8）。",
|
||
"按钮用原生 disabled 而不是类名控制禁用（frameworks/ConfirmModal.css:20），能自动脱离 Tab 序列，请优先用它。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-modal-mask（遮罩）与 .kole-confirm（弹体）加 .kole-confirm-head / -icon / -title / -content / -extra / -footer / -btn 结构类；弹体状态 is-danger / is-primary，按钮主色用 .primary / .danger。",
|
||
"table": [
|
||
{
|
||
"name": "kole-modal-mask",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ConfirmModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-confirm",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ConfirmModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-head",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ConfirmModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-icon",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ConfirmModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-danger",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ConfirmModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ConfirmModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ConfirmModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-content",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ConfirmModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-extra",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ConfirmModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-footer",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ConfirmModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ConfirmModal.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"confirmmodal-ex-1",
|
||
"confirmmodal-ex-2"
|
||
],
|
||
"notes": [
|
||
"遮罩见 frameworks/ConfirmModal.css:3，弹体见 frameworks/ConfirmModal.css:4，弹体类型色见 frameworks/ConfirmModal.css:8-9，按钮变体与禁用见 frameworks/ConfirmModal.css:16-20。",
|
||
"示例直接用 .primary 与 .danger 两个按钮类区分主次（site/examples/confirmmodal.json 的 ex-1/ex-2）。",
|
||
"按钮 hover 的边框色 #C9D4F2 是硬编码，不随主题令牌变化（frameworks/ConfirmModal.css:15）。"
|
||
]
|
||
}
|