# 对话框

显示在页面上的模态对话框窗口。

```jsx
<Dialog.Root>
  <Dialog.Trigger>
    <Button>编辑个人资料</Button>
  </Dialog.Trigger>

  <Dialog.Content maxWidth="450px">
    <Dialog.Title>编辑个人资料</Dialog.Title>

    <Dialog.Description size="2" mb="4">
      修改您的个人资料。
    </Dialog.Description>

    <Flex direction="column" gap="3">
      <label>
        <Text as="div" size="2" mb="1" weight="bold">
          姓名
        </Text>

        <TextField.Root defaultValue="Freja Johnsen" placeholder="请输入您的全名" />
      </label>

      <label>
        <Text as="div" size="2" mb="1" weight="bold">
          电子邮件
        </Text>

        <TextField.Root defaultValue="freja@example.com" placeholder="请输入您的电子邮件" />
      </label>
    </Flex>

    <Flex gap="3" mt="4" justify="end">
      <Dialog.Close>
        <Button variant="soft" color="gray">
          取消
        </Button>
      </Dialog.Close>

      <Dialog.Close>
        <Button>保存</Button>
      </Dialog.Close>
    </Flex>
  </Dialog.Content>
</Dialog.Root>
```

## [API 参考](#api-参考)

该组件继承自 [Dialog primitive](/primitives/docs/components/dialog) 的属性。

请注意，此对话框是围绕模态模式设计的，因此 `modal` 属性不可用。

### [根元素](#根元素)

包含对话框的所有部分。

### [触发器](#触发器)

包裹将打开对话框的控件。

### [内容](#内容)

包含对话框的内容。该组件基于 `div` 元素。

| Prop        | Type                                   | Default          |
| ----------- | -------------------------------------- | ---------------- |
| `asChild`   | `boolean`                              | No default value |
| `align`     | `"start" \| "center"`                  | `"center"`       |
| `size`      | `Responsive<"1" \| "2" \| "3" \| "4">` | `"3"`            |
| `width`     | `Responsive<string>`                   | No default value |
| `minWidth`  | `Responsive<string>`                   | No default value |
| `maxWidth`  | `Responsive<string>`                   | `"600px"`        |
| `height`    | `Responsive<string>`                   | No default value |
| `minHeight` | `Responsive<string>`                   | No default value |
| `maxHeight` | `Responsive<string>`                   | No default value |

### [标题](#标题)

一个可访问的标题，在对话框打开时会被宣布。该部分基于 [Heading](/themes/docs/components/heading) 组件，具有预定义的字体大小和上方的行高修剪。

### [描述](#描述)

一个可选的可访问描述，在对话框打开时会被宣布。该部分基于 [Text](/themes/docs/components/text) 组件，具有预定义的字体大小。

如果您希望完全删除描述，请删除此部分并将 `aria-describedby={undefined}` 传递给 `Content`。

### [关闭](#关闭)

包裹将关闭对话框的控件。

## [示例](#示例)

### [大小](#大小)

使用 `size` 属性来控制对话框的大小。它会影响内容的 `padding` 和 `border-radius`。与 `width`、`minWidth` 和 `maxWidth` 属性结合使用可以控制对话框的宽度。

```jsx
<Flex gap="4" align="center">
  <Dialog.Root>
    <Dialog.Trigger>
      <Button variant="soft">大小 1</Button>
    </Dialog.Trigger>

    <Dialog.Content size="1" maxWidth="300px">
      <Text as="p" trim="both" size="1">
        敏捷的棕色狐狸跳过懒狗。
      </Text>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button variant="soft">大小 2</Button>
    </Dialog.Trigger>

    <Dialog.Content size="2" maxWidth="400px">
      <Text as="p" trim="both" size="2">
        敏捷的棕色狐狸跳过懒狗。
      </Text>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button variant="soft">大小 3</Button>
    </Dialog.Trigger>

    <Dialog.Content size="3" maxWidth="500px">
      <Text as="p" trim="both" size="3">
        敏捷的棕色狐狸跳过懒狗。
      </Text>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button variant="soft">大小 4</Button>
    </Dialog.Trigger>

    <Dialog.Content size="4">
      <Text as="p" trim="both" size="4">
        敏捷的棕色狐狸跳过懒狗。
      </Text>
    </Dialog.Content>
  </Dialog.Root>
</Flex>
```

### [带有插入内容](#带有插入内容)

使用 [Inset](/themes/docs/components/inset) 组件将内容与对话框的边缘对齐。

```jsx
<Dialog.Root>
  <Dialog.Trigger>
    <Button>查看用户</Button>
  </Dialog.Trigger>

  <Dialog.Content>
    <Dialog.Title>用户</Dialog.Title>

    <Dialog.Description>以下用户可以访问该项目。</Dialog.Description>

    <Inset side="x" my="5">
      <Table.Root>
        <Table.Header>
          <Table.Row>
            <Table.ColumnHeaderCell>全名</Table.ColumnHeaderCell>

            <Table.ColumnHeaderCell>电子邮件</Table.ColumnHeaderCell>

            <Table.ColumnHeaderCell>组</Table.ColumnHeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          <Table.Row>
            <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

            <Table.Cell>danilo@example.com</Table.Cell>

            <Table.Cell>开发者</Table.Cell>
          </Table.Row>

          <Table.Row>
            <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

            <Table.Cell>zahra@example.com</Table.Cell>

            <Table.Cell>管理员</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>
    </Inset>

    <Flex gap="3" justify="end">
      <Dialog.Close>
        <Button variant="soft" color="gray">
          关闭
        </Button>
      </Dialog.Close>
    </Flex>
  </Dialog.Content>
</Dialog.Root>
```

<!--$-->

<!--/$-->