组件 · 反馈
AlertDialog 确认对话框
用于确认/危险操作的告警对话框，强调取消与确认动作分区。
使用建议
- 避免：用普通 Dialog 冒充告警语义
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
import {
AlertDialog,
AlertDialogAction,
AlertDialogBackdrop,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
// …共 17 个导出
} from '@selrux/ui/alert-dialog';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
基础用法
需要用户明确确认的操作；点击遮罩不关闭。
异步确认
AlertDialogAction 的 onClick 返回 Promise 时显示 loading，完成后关闭。
受控与拦截
open / onOpenChange 受控；AlertDialogAction 的 loading 受控忙碌；beforeClose 可拦截；closeOnEscape={false} 禁用 Esc；disabled 禁止打开；defaultOpen 为非受控初始值。
API
属性覆盖：示例用到 11 / 11 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
AlertDialog.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示AlertDialog.initialFocusRef：焦点目标 ref，效果不可见；行为见“无障碍”AlertDialog.returnFocusRef：焦点目标 ref，效果不可见；行为见“无障碍”AlertDialogPortal.container：Portal 挂载目标，默认 body；文档页无需更换挂载点
AlertDialog
AlertDialog 根。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
classNames | 语义结构 class。 | AlertDialogClassNamesInput | - |
styles | 语义结构 style。 | AlertDialogStylesInput | - |
disabled | 为真时禁止打开并立即抑制可见层。 | boolean | - |
closeOnEscape | 顶层 Esc 是否进入关闭流程。默认 true。 | boolean | true |
beforeClose | 关闭前拦截；规则同 Dialog beforeClose。 | DialogBeforeClose | - |
initialFocusRef | 打开时初始焦点目标。 | RefObject<HTMLElement | null> | - |
returnFocusRef | 适用关闭路径的返回焦点目标。 | RefObject<HTMLElement | null> | - |
open | 受控打开；与 defaultOpen 互斥。 | boolean | - |
defaultOpen | 非受控默认打开；挂载时读取一次。 | boolean | - |
onOpenChange | 请求变更；不强改父状态。 | ((open: boolean, details: OverlayChangeDetails) => void) | - |
children | 复合子树：Trigger / Portal 等。 | ReactNode | - |
AlertDialogAction
AlertDialogAction。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
render | 与 children 互斥。 | ReactElement<unknown, string | JSXElementConstructor<any>> | - |
loading | 受控忙碌；与内部 Promise pending 取或。
组合 Button 时会合并到 render 的 loading。 | boolean | - |
onClick | 确认点击；返回 Promise 时进入挂起，resolve/reject 后结束，均不自动关层。 | AlertDialogActionClickHandler | - |
children | 不传 render 时的按钮内容。 | ReactNode | - |
另有 287 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
AlertDialogBackdrop
AlertDialogBackdrop。
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
AlertDialogCancel
AlertDialogCancel。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
render | 与 children 互斥。 | ReactElement<unknown, string | JSXElementConstructor<any>> | - |
children | 不传 render 时的按钮内容。 | ReactNode | - |
另有 288 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
AlertDialogContent
AlertDialogContent。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
style | 普通样式；受管定位不可绕过。 | CSSProperties | - |
onEscapeKeyDown | Esc 按下；preventDefault 取消关闭且跳过 beforeClose。 | ((event: KeyboardEvent) => void) | - |
size | 宽度档；省略取 md。 | "sm" | "md" | - |
children | 卡片子树。 | ReactNode | - |
另有 277 项原生属性与事件继承自 HTMLAttributes，原样透传。
AlertDialogDescription
AlertDialogDescription。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 说明内容。 | ReactNode | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
AlertDialogFooter
AlertDialogFooter。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 区域子树。 | ReactNode | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
AlertDialogHeader
AlertDialogHeader。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 区域子树。 | ReactNode | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
AlertDialogMedia
AlertDialogMedia。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 区域子树。 | ReactNode | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
AlertDialogPortal
AlertDialogPortal。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
container | 挂载目标；省略默认 body；显式 null 等待就绪。 | PortalContainerInput | body |
children | Portal 子树：Backdrop 与 Content。 | ReactNode | - |
AlertDialogTitle
AlertDialogTitle。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 标题内容。 | ReactNode | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
AlertDialogTrigger
AlertDialogTrigger。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
render | 与 children 互斥。 | ReactElement<unknown, string | JSXElementConstructor<any>> | - |
children | 不传 render 时的按钮内容。 | ReactNode | - |
另有 284 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
导出类型：AlertDialogActionClickHandler、AlertDialogActionProps、AlertDialogBackdropProps、AlertDialogCancelProps、AlertDialogClassNamesInput、AlertDialogContentProps、AlertDialogDescriptionProps、AlertDialogPortalProps、AlertDialogProps、AlertDialogSectionProps、AlertDialogSemanticSlot、AlertDialogSize、AlertDialogStylesInput、AlertDialogTitleProps、AlertDialogTriggerProps、DialogBeforeClose、OverlayChangeDetails、OverlayChangeReason、PortalContainerInput、ResolveAlertDialogSemanticStylesInput、ResolvedAlertDialogClassNames、ResolvedAlertDialogSemanticStyles、ResolvedAlertDialogStyles
函数与常量
| 名称 | 说明 | 签名 / 类型 |
|---|---|---|
alertDialogSizes | 允许的 Content size。 | readonly ["sm", "md"] |
mergeAlertDialogClassName | 合并语义 class 与部件自身 className。 | (slot: string | undefined, own: string | undefined) => string | undefined |
mergeAlertDialogStyle | 合并语义 style 与部件自身 style；部件显式键覆盖。 | (slot: CSSProperties | undefined, own: CSSProperties | undefined) => CSSProperties | undefined |
resolveAlertDialogSemanticStyles | 解析语义样式映射。 | (input: ResolveAlertDialogSemanticStylesInput) => ResolvedAlertDialogSemanticStyles |
resolveAlertDialogSize | 解析 size；非法或省略时回退 md。 | (size?: AlertDialogSize) => AlertDialogSize |
无障碍
摘自源码 JSDoc。
AlertDialog.closeOnEscape：顶层 Esc 是否进入关闭流程。AlertDialog.initialFocusRef：打开时初始焦点目标。AlertDialog.returnFocusRef：适用关闭路径的返回焦点目标。AlertDialogContent.onEscapeKeyDown：Esc 按下；preventDefault 取消关闭且跳过 beforeClose。