警告对话框

一个中断用户的重要内容并期待回应的模态对话框。

import * as React from "react";
import { AlertDialog } from "radix-ui";
import "./styles.css";

const AlertDialogDemo = () => (
	<AlertDialog.Root>
		<AlertDialog.Trigger asChild>
			<button className="Button violet">Delete account</button>
		</AlertDialog.Trigger>
		<AlertDialog.Portal>
			<AlertDialog.Overlay className="AlertDialogOverlay" />
			<AlertDialog.Content className="AlertDialogContent">
				<AlertDialog.Title className="AlertDialogTitle">
					Are you absolutely sure?
				</AlertDialog.Title>
				<AlertDialog.Description className="AlertDialogDescription">
					This action cannot be undone. This will permanently delete your
					account and remove your data from our servers.
				</AlertDialog.Description>
				<div style={{ display: "flex", gap: 25, justifyContent: "flex-end" }}>
					<AlertDialog.Cancel asChild>
						<button className="Button mauve">Cancel</button>
					</AlertDialog.Cancel>
					<AlertDialog.Action asChild>
						<button className="Button red">Yes, delete account</button>
					</AlertDialog.Action>
				</div>
			</AlertDialog.Content>
		</AlertDialog.Portal>
	</AlertDialog.Root>
);

export default AlertDialogDemo;

Features

焦点会被自动捕获。

可以是受控或非受控。

使用 Title 和 Description 组件来管理屏幕阅读器通知。

按 Esc 键会自动关闭组件。

安装

可以从命令行中安装该组件。

npm install @radix-ui/react-alert-dialog

结构

导入所有部分并将其组合在一起。

import { AlertDialog } from "radix-ui";

export default () => (
    <AlertDialog.Root>
        <AlertDialog.Trigger />
        <AlertDialog.Portal>
            <AlertDialog.Overlay />
            <AlertDialog.Content>
                <AlertDialog.Title />
                <AlertDialog.Description />
                <AlertDialog.Cancel />
                <AlertDialog.Action />
            </AlertDialog.Content>
        </AlertDialog.Portal>
    </AlertDialog.Root>
);

API 参考

根部

包含警告对话框的所有部分。

Prop	Type	Default
`defaultOpen`	`boolean`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value

触发器

一个打开对话框的按钮。

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`

门口

使用时，将您的覆盖层和内容部分传送到 body 中。

Prop	Type	Default
`forceMount`	`boolean`	No default value
`container`	`HTMLElement`	`document.body`

覆盖层

对话框打开时覆盖视图的无效部分的层。

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	No default value

Data attribute	Values
`[data-state]`	`"open" \| "closed"`

内容

包含在对话框打开时要呈现的内容。

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	No default value
`onOpenAutoFocus`	`function`	No default value
`onCloseAutoFocus`	`function`	No default value
`onEscapeKeyDown`	`function`	No default value

Data attribute	Values
`[data-state]`	`"open" \| "closed"`

取消

一个关闭对话框的按钮。该按钮应该在视觉上与 AlertDialog.Action 按钮区分开来。

Prop	Type	Default
`asChild`	`boolean`	`false`

动作

一个关闭对话框的按钮。这些按钮应该在视觉上与 AlertDialog.Cancel 按钮区分开来。

Prop	Type	Default
`asChild`	`boolean`	`false`

标题

打开对话框时将被宣布的可访问名称。或者，您可以为 AlertDialog.Content 提供 aria-label 或 aria-labelledby，并排除此组件。

Prop	Type	Default
`asChild`	`boolean`	`false`

描述

打开对话框时将被宣布的可访问描述。或者，您可以为 AlertDialog.Content 提供 aria-describedby，并排除此组件。

Prop	Type	Default
`asChild`	`boolean`	`false`

示例

在异步表单提交后关闭

使用受控属性在异步操作完成后以编程方式关闭警告对话框。

import * as React from "react";
import { AlertDialog } from "radix-ui";

const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));

export default () => {
    const [open, setOpen] = React.useState(false);

    return (
        <AlertDialog.Root open={open} onOpenChange={setOpen}>
            <AlertDialog.Trigger>打开</AlertDialog.Trigger>
            <AlertDialog.Portal>
                <AlertDialog.Overlay />
                <AlertDialog.Content>
                    <form
                        onSubmit={(event) => {
                            wait().then(() => setOpen(false));
                            event.preventDefault();
                        }}
                    >
                        {/** 一些输入 */}
                        <button type="submit">提交</button>
                    </form>
                </AlertDialog.Content>
            </AlertDialog.Portal>
        </AlertDialog.Root>
    );
};

自定义门户容器

自定义您的警告对话框门户的元素。

export default () => {
    const [container, setContainer] = React.useState(null);
    return (
        <div>
            <AlertDialog.Root>
                <AlertDialog.Trigger />
                <AlertDialog.Portal container={container}>
                    <AlertDialog.Overlay />
                    <AlertDialog.Content>...</AlertDialog.Content>
                </AlertDialog.Portal>
            </AlertDialog.Root>

            <div ref={setContainer} />
        </div>
    );
};

可访问性

遵循警告和消息对话框 WAI-ARIA 设计模式。

键盘交互

Key	Description
`Space`	打开/关闭对话框。
`Enter`	打开/关闭对话框。
`Tab`	将焦点移动到下一个可聚焦元素。
`Shift + Tab`	将焦点移动到上一个可聚焦元素。
`Esc`	关闭对话框并将焦点移动到 `AlertDialog.Trigger`。

上一篇手风琴 Accordion

下一篇长宽比 Aspect Ratio

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

警告对话框

Features