<Dialog.Root>
<Dialog.Trigger>
<Button>Edit profile</Button>
</Dialog.Trigger>
<Dialog.Content maxWidth="450px">
<Dialog.Title>Edit profile</Dialog.Title>
<Dialog.Description size="2" mb="4">
Make changes to your profile.
</Dialog.Description>
<Flex direction="column" gap="3">
<label>
<Text as="div" size="2" mb="1" weight="bold">
Name
</Text>
<TextField.Root
defaultValue="Freja Johnsen"
placeholder="Enter your full name"
/>
</label>
<label>
<Text as="div" size="2" mb="1" weight="bold">
Email
</Text>
<TextField.Root
defaultValue="freja@example.com"
placeholder="Enter your email"
/>
</label>
</Flex>
<Flex gap="3" mt="4" justify="end">
<Dialog.Close>
<Button variant="soft" color="gray">
Cancel
</Button>
</Dialog.Close>
<Dialog.Close>
<Button>Save</Button>
</Dialog.Close>
</Flex>
</Dialog.Content>
</Dialog.Root>
此组件继承自 Dialog 基元的属性。
请注意，此对话框是围绕模态模式设计的，因此 modal 属性不可用。
包含对话框的所有部分。
包裹用于打开对话框的控件。
包含对话框的内容。此组件基于 div 元素。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | boolean | 无默认值 |
align | "start" | "center" | "center" |
size | Responsive<"1" | "2" | "3" | "4"> | "3" |
width | Responsive<string> | 无默认值 |
minWidth | Responsive<string> | 无默认值 |
maxWidth | Responsive<string> | "600px" |
height | Responsive<string> | 无默认值 |
minHeight | Responsive<string> | 无默认值 |
maxHeight | Responsive<string> | 无默认值 |
一个无障碍标题，在对话框打开时会被朗读。此部分基于 Heading 组件，并预定义了字体大小和顶部行高裁剪。
一个可选的无障碍描述，在对话框打开时会被朗读。此部分基于 Text 组件，并预定义了字体大小。
如果想要完全移除描述，请移除此部分并将 aria-describedby={undefined} 传递给 Content。
包裹用于关闭对话框的控件。
使用 size 属性来控制对话框的尺寸。它会影响 Content 的 padding 和 border-radius。结合 width、minWidth 和 maxWidth 属性一起使用可以控制对话框的宽度。
<Flex gap="4" align="center">
<Dialog.Root>
<Dialog.Trigger>
<Button variant="soft">Size 1</Button>
</Dialog.Trigger>
<Dialog.Content size="1" maxWidth="300px">
<Text as="p" trim="both" size="1">
The quick brown fox jumps over the lazy dog.
</Text>
</Dialog.Content>
</Dialog.Root>
<Dialog.Root>
<Dialog.Trigger>
<Button variant="soft">Size 2</Button>
</Dialog.Trigger>
<Dialog.Content size="2" maxWidth="400px">
<Text as="p" trim="both" size="2">
The quick brown fox jumps over the lazy dog.
</Text>
</Dialog.Content>
</Dialog.Root>
<Dialog.Root>
<Dialog.Trigger>
<Button variant="soft">Size 3</Button>
</Dialog.Trigger>
<Dialog.Content size="3" maxWidth="500px">
<Text as="p" trim="both" size="3">
The quick brown fox jumps over the lazy dog.
</Text>
</Dialog.Content>
</Dialog.Root>
<Dialog.Root>
<Dialog.Trigger>
<Button variant="soft">Size 4</Button>
</Dialog.Trigger>
<Dialog.Content size="4">
<Text as="p" trim="both" size="4">
The quick brown fox jumps over the lazy dog.
</Text>
</Dialog.Content>
</Dialog.Root>
</Flex>
使用 Inset 组件使内容与对话框的侧边对齐。
<Dialog.Root>
<Dialog.Trigger>
<Button>View users</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Title>Users</Dialog.Title>
<Dialog.Description>
The following users have access to this project.
</Dialog.Description>
<Inset side="x" my="5">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Group</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>Developer</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
<Table.Cell>zahra@example.com</Table.Cell>
<Table.Cell>Admin</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Inset>
<Flex gap="3" justify="end">
<Dialog.Close>
<Button variant="soft" color="gray">
Close
</Button>
</Dialog.Close>
</Flex>
</Dialog.Content>
</Dialog.Root>