Radix 首页
由 WorkOS 制作
Radix 首页
由 WorkOS 制作
主题主题基础组件基础组件图标图标颜色颜色
文档游乐场博客
组件

对话框

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

查看源代码报告问题在 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="[email protected]"
          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 参考

此组件继承自 Dialog 原语 的 props。

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

根

包含对话框的所有部分。

触发器

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

内容

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

属性类型默认值
asChild
布尔值
无默认值
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>
无默认值

标题

对话框打开时会宣布一个可访问的标题。此部分基于 标题 组件，并预定义了字体大小和顶部的前导修剪。

描述

对话框打开时会宣布一个可选的可访问描述。此部分基于 文本 组件，并预定义了字体大小。

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

关闭

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

示例

尺寸

使用 size 属性来控制对话框的尺寸。它会影响 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>

带内嵌内容

使用 内嵌 组件将内容与对话框的侧边对齐。

<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>[email protected]</Table.Cell>

            <Table.Cell>Developer</Table.Cell>

          </Table.Row>



          <Table.Row>

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

            <Table.Cell>[email protected]</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>
上一页数据列表
下一页下拉菜单
在 GitHub 上编辑此页面。