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)标题文字颜色