Popconfirm 设计文档
气泡确认框:目标元素操作需二次确认时使用。封装 Popover,内置确认/取消双按钮 + 可选右上角关闭按钮,比 Modal 更轻量。支持 title/content(content 可为函数注入 initialFocusRef)、icon(缺省 IconAlertTriangle)、okType/cancelType、okButtonProps/cancelButtonProps(含 autoFocus)、onConfirm/onCancel 返回 Promise 时对应按钮 loading(resolve 关闭 / reject 保持)、12 方位 position(默认 bottomLeft)。role=dialog non-modal。
← API 文档使用建议
气泡确认框:目标元素操作需二次确认时使用。封装 Popover,内置确认/取消双按钮 + 可选右上角关闭按钮,比 Modal 更轻量。支持 title/content(content 可为函数注入 initialFocusRef)、icon(缺省 IconAlertTriangle)、okType/cancelType、okButtonProps/cancelButtonProps(含 autoFocus)、onConfirm/onCancel 返回 Promise 时对应按钮 loading(resolve 关闭 / reject 保持)、12 方位 position(默认 bottomLeft)。role=dialog non-modal。
Accessibility
ARIA role:dialog
- 浮层 role=dialog(aria-modal=false,复用 Popover),aria-labelledby 指向 Popconfirm 标题
- 触发元素承载 role=button + aria-haspopup=dialog + aria-expanded/controls(复用 Popover dialog 语义)
- guardFocus(默认 true)用 useFocusTrap 陷入焦点,关闭后 returnFocusOnClose 归还触发器
- okButtonProps/cancelButtonProps.autoFocus 或 content 函数 initialFocusRef 控制打开时初始焦点(对齐 Semi)
- closeOnEsc 与外部点击关闭复用 Popover→Tooltip 的 useDismiss
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-popconfirm-body-text | var(--cd-color-text-2) | 正文文字颜色 |
--cd-color-popconfirm-header-alert-icon | var(--cd-color-warning) | 警示图标颜色 |
--cd-color-popconfirm-header-text | var(--cd-color-text-0) | 标题文字颜色 |