警告对话框

一个模态对话框，用于打断用户流程，显示重要内容并期望用户做出响应。

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;

特性

焦点自动被捕获。

可控或非受控。

通过 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 参考

Root

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

属性	类型	默认值
`defaultOpen`	`布尔值`	无默认值
`open`	`布尔值`	无默认值
`onOpenChange`	`函数`	无默认值

Trigger

一个用于打开对话框的按钮。

属性	类型	默认值
`asChild`	`布尔值`	`false`

数据属性	值
`[data-state]`	`"open" \|"closed"`

Portal

使用时，将你的 overlay 和 content 部分传送到 body 中。

属性	类型	默认值
`forceMount`	`布尔值`	无默认值
`container`	`HTMLElement`	`document.body`

Overlay

当对话框打开时，覆盖视图中非活动部分的图层。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`forceMount`	`布尔值`	无默认值

数据属性	值
`[data-state]`	`"open" \|"closed"`

Content

包含对话框打开时要渲染的内容。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`forceMount`	`布尔值`	无默认值
`onOpenAutoFocus`	`函数`	无默认值
`onCloseAutoFocus`	`函数`	无默认值
`onEscapeKeyDown`	`函数`	无默认值

数据属性	值
`[data-state]`	`"open" \|"closed"`

Cancel

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

属性	类型	默认值
`asChild`	`布尔值`	`false`

Action

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

属性	类型	默认值
`asChild`	`布尔值`	`false`

Title

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

属性	类型	默认值
`asChild`	`布尔值`	`false`

Description

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

属性	类型	默认值
`asChild`	`布尔值`	`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>Open</AlertDialog.Trigger>
			<AlertDialog.Portal>
				<AlertDialog.Overlay />
				<AlertDialog.Content>
					<form
						onSubmit={(event) => {
							wait().then(() => setOpen(false));
							event.preventDefault();
						}}
					>
						{/** some inputs */}
						<button type="submit">Submit</button>
					</form>
				</AlertDialog.Content>
			</AlertDialog.Portal>
		</AlertDialog.Root>
	);
};

自定义 portal 容器

自定义你的警告对话框传送到的元素。

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>
	);
};

可访问性

遵循 Alert and Message Dialogs WAI-ARIA 设计模式。

键盘交互

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

上一篇手风琴

下一篇纵横比

在 GitHub 上编辑此页。

概述

指南

组件

实用工具

警告对话框

特性