68 lines
3.2 KiB
JSON
68 lines
3.2 KiB
JSON
{
|
||
"slug": "popconfirm",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "气泡确认样式：kole-popconfirm-pop 配 placement 方向类，内容由 inner/icon/title/actions 组合。",
|
||
"usage": [
|
||
"弹出体类名是 .kole-popconfirm-pop，方向靠附加类切换：.placement-bottom 向下、.placement-top 向上，位置由这两类决定。",
|
||
"内容结构固定为 .kole-popconfirm-inner（内边距与横向排列）、.kole-popconfirm-icon（警告图标）、.kole-popconfirm-title（文案）。",
|
||
"底部动作区 .kole-popconfirm-actions 内放 .kole-popconfirm-btn，主按钮再加 .primary。",
|
||
"警告色与按钮色取自 --kole-color-warning 与 --kole-color-brand，非主按钮用 --kole-color-card-bg 底。"
|
||
],
|
||
"bestPractices": [
|
||
"方向类与 .kole-popconfirm-pop 同元素才生效，写在根容器上不改变定位。",
|
||
"确认按钮需要同时加 .kole-popconfirm-btn 与 .primary，只加后者没有按钮基线。",
|
||
"气泡没有小箭头伪元素，与本组件库其他弹出层一致，靠位置类区分方向即可。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-popconfirm",
|
||
"type": "基础类",
|
||
"desc": "根容器：相对定位，作为气泡定位参照（frameworks/Popconfirm.css:3）"
|
||
},
|
||
{
|
||
"name": "kole-popconfirm-pop",
|
||
"type": "结构类",
|
||
"desc": "气泡体：卡片底、圆角、阴影（frameworks/Popconfirm.css:4）"
|
||
},
|
||
{
|
||
"name": "kole-popconfirm-title",
|
||
"type": "结构类",
|
||
"desc": "确认文案（frameworks/Popconfirm.css:14）"
|
||
},
|
||
{
|
||
"name": "primary",
|
||
"type": "变体类",
|
||
"desc": "动作区主按钮配色（frameworks/Popconfirm.css:20）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"气泡应挂 role=tooltip 或 dialog（含交互按钮时用 dialog），并让触发元素带 aria-describedby。",
|
||
"警告图标是装饰，配 aria-hidden；文案要自足说明后果，不要依赖图标表达。",
|
||
"气泡内按钮需要可聚焦且能按 Esc 关闭，焦点顺序由宿主管理。",
|
||
"主按钮用 --kole-color-brand，危险操作可改用 --kole-color-error 覆盖以保证视觉警示一致。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Popconfirm.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Popconfirm.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"popconfirm-ex-1",
|
||
"popconfirm-ex-2"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Popconfirm.css:3 定义 .kole-popconfirm",
|
||
"依据 frameworks/Popconfirm.css:4 定义 .kole-popconfirm-pop",
|
||
"依据 frameworks/Popconfirm.css:14 定义 .kole-popconfirm-title",
|
||
"依据 frameworks/Popconfirm.css:20 定义 .primary",
|
||
"类名总表来自 frameworks/Popconfirm.css（facts.consumedApi.classes，11 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|