显示在页面上的模态对话框窗口。
<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>
该组件继承自 Dialog primitive 的属性。
请注意，此对话框是围绕模态模式设计的，因此 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 组件，具有预定义的字体大小和上方的行高修剪。
一个可选的可访问描述，在对话框打开时会被宣布。该部分基于 Text 组件，具有预定义的字体大小。
如果您希望完全删除描述，请删除此部分并将 aria-describedby={undefined} 传递给 Content。
包裹将关闭对话框的控件。
使用 size 属性来控制对话框的大小。它会影响内容的 padding 和 border-radius。与 width、minWidth 和 maxWidth 属性结合使用可以控制对话框的宽度。
<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 组件将内容与对话框的边缘对齐。
<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>