Alert Dialog

确认对话框是内置了「取消 / 确认」按钮对的 Dialog，用于不可逆操作前的二次确认。下方预览由 pingo 引擎实时渲染，并跟随站点主题切换明暗。

用法

import { createElement } from "@dopejs/pingo";
import { AlertDialog } from "@dopejs/pingo-ui";

root.render(
  createElement(AlertDialog, {
    open,
    onOpenChange: (next) => setOpen(next),
    title: "确认退出？",
    description: "未保存的修改将会丢失。",
    onCancel: () => {},
    onAction: () => quit(),
    children: null,
  }),
);

与 Dialog 一样，浮层填满它自己的父容器，请挂载在靠近根节点的位置。注意 children 继承自 DialogProps 仍为必填，但会被组件内置的标题/描述/按钮结构覆盖，传 null 即可。点击取消或确认按钮都会先触发对应回调，再通过 onOpenChange(false) 请求关闭；遮罩点击同样会关闭。

示例

破坏性操作

destructive 会把确认按钮渲染为危险色。

Props

继承 DialogProps（open、onOpenChange、children、className），另有：

Prop	类型	默认值	说明
`title`	`string`	—	标题（必填）
`description`	`string`	—	补充说明
`cancelLabel`	`string`	`"取消"`	取消按钮文案
`actionLabel`	`string`	`"确定"`	确认按钮文案
`onCancel`	`() => void`	—	取消回调（随后关闭）
`onAction`	`() => void`	—	确认回调（随后关闭）
`destructive`	`boolean`	`false`	确认按钮使用危险色

Alert Dialog

用法

示例

破坏性操作

Props

无障碍