# 警告对话框

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

## Features

- 焦点会被自动捕获。

- 可以是受控或非受控。

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

- 按 Esc 键会自动关闭组件。

## [Anatomy](#anatomy)

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

```jsx
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-参考)

### [根部](#根部)

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

| 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` |

## [示例](#示例)

### [在异步表单提交后关闭](#在异步表单提交后关闭)

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

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

### [自定义门户容器](#自定义门户容器)

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

```jsx
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 设计模式](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog)。

### [键盘交互](#键盘交互)

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

<!--$-->

<!--/$-->