警告对话框

¥Alert Dialog

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

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;
Expand code

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

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

结构

¥Anatomy

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

¥Import all parts and piece them together.

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

¥API Reference

根

¥Root

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

¥Contains all the parts of an alert dialog.

触发器

¥Trigger

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

¥A button that opens the dialog.

门户

¥Portal

使用时，将叠加层和内容部分传送到 body 中。

¥When used, portals your overlay and content parts into the body.

叠加层

¥Overlay

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

¥A layer that covers the inert portion of the view when the dialog is open.

内容

¥Content

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

¥Contains content to be rendered when the dialog is open.

取消

¥Cancel

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

¥A button that closes the dialog. This button should be distinguished visually from AlertDialog.Action buttons.

操作

¥Action

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

¥A button that closes the dialog. These buttons should be distinguished visually from the AlertDialog.Cancel button.

标题

¥Title

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

¥An accessible name to be announced when the dialog is opened. Alternatively, you can provide aria-label or aria-labelledby to AlertDialog.Content and exclude this component.

描述

¥Description

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

¥An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby to AlertDialog.Content and exclude this component.

示例

¥Examples

异步表单提交后关闭

¥Close after asynchronous form submission

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

¥Use the controlled props to programmatically close the Alert Dialog after an async operation has completed.

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

自定义门户容器

¥Custom portal container

自定义警报对话框的入口元素。

¥Customise the element that your alert dialog portals into.

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

可访问性

¥Accessibility

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

¥Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.

键盘交互

¥Keyboard Interactions