警告对话框

一个模态对话框，用于以重要内容中断用户并期望获得响应。

import React from 'react';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
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 * as AlertDialog from '@radix-ui/react-alert-dialog';

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

根

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

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

触发器

打开对话框的按钮。

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

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

传送门

使用时，将覆盖层和内容部分传送至 body。

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

覆盖层

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

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

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

内容

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

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

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

取消

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

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

操作

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

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

标题

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

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

描述

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

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

示例

异步表单提交后关闭

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

import React from 'react';
import * as AlertDialog from '@radix-ui/react-alert-dialog';

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

自定义传送门容器

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

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 设计模式。

键盘交互

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

上一个手风琴

下一个纵横比

在 GitHub 上编辑此页面。

概述

指南

组件

实用程序