Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

对话框

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

View sourceReport an issueView in Playground
<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>

API 参考

¥API Reference

此组件继承了 对话框基础组件 的属性。

¥This component inherits props from the Dialog primitive.

Note that this dialog is designed around the modal pattern, so the modal prop is unavailable.

根

¥Root

包含对话框的所有部分。

¥Contains all the parts of a dialog.

触发器

¥Trigger

封装将打开对话框的控件。

¥Wraps the control that will open the dialog.

内容

¥Content

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

¥Contains the content of the dialog. This component is based on the div element.

PropTypeDefault
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

标题

¥Title

对话框打开时会显示可访问的标题。这部分基于 标题 组件，具有预定义的字体大小和顶部的行距修剪。

¥An accessible title that is announced when the dialog is opened. This part is based on the Heading component with a pre-defined font size and leading trim on top.

描述

¥Description

一个可选的可访问描述，在对话框打开时显示。这部分基于 文本 组件，具有预定义的字体大小。

¥An optional accessible description that is announced when the dialog is opened. This part is based on the Text component with a pre-defined font size.

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

¥If you want to remove the description entirely, remove this part and pass aria-describedby={undefined} to Content.

关闭

¥Close

封装将关闭对话框的控件。

¥Wraps the control that will close the dialog.

示例

¥Examples

尺寸

¥Size

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

¥Use the size prop to control size of the dialog. It will affect the padding and border-radius of the Content. Use it in conjunction with the width, minWidth and maxWidth props to control the width of the dialog.

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

使用插入内容

¥With inset content

使用 插入 组件将内容与对话框边缘对齐。

¥Use the Inset component to align content flush with the sides of the dialog.

<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>
Previous数据列表
Next下拉菜单