# 弹出框

用于显示丰富内容的浮动元素，触发方式为按钮。

```jsx
<Popover.Root>
  <Popover.Trigger>
    <Button variant="soft">
      <ChatBubbleIcon width="16" height="16" />
      评论
    </Button>
  </Popover.Trigger>

  <Popover.Content width="360px">
    <Flex gap="3">
      <Avatar
        size="2"
        src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
        fallback="A"
        radius="full"
      />

      <Box flexGrow="1">
        <TextArea placeholder="写评论…" style={{ height: 80 }} />

        <Flex gap="3" mt="3" justify="between">
          <Flex align="center" gap="2" asChild>
            <Text as="label" size="2">
              <Checkbox />

              <Text>发给群组</Text>
            </Text>
          </Flex>

          <Popover.Close>
            <Button size="1">评论</Button>
          </Popover.Close>
        </Flex>
      </Box>
    </Flex>
  </Popover.Content>
</Popover.Root>
```

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

该组件继承自 [Popover 基本组件](/primitives/docs/components/popover) 的属性。

### [根组件](#根组件)

包含弹出框的所有部分。

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

包裹将打开弹出框的控件。

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

包含在打开的弹出框中渲染的内容。该组件基于 `div` 元素。

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

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

包裹将关闭弹出框的控件。

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性控制弹出框的大小。它会影响内容的 `padding` 和 `border-radius`。 将其与 `width`/`minWidth`/`maxWidth` 和 `height`/`minHeight`/`maxHeight` 属性结合使用以控制弹出框的大小。

```jsx
<Flex gap="4" align="center">
  <Popover.Root>
    <Popover.Trigger>
      <Button variant="soft">尺寸 1</Button>
    </Popover.Trigger>

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

  <Popover.Root>
    <Popover.Trigger>
      <Button variant="soft">尺寸 2</Button>
    </Popover.Trigger>

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

  <Popover.Root>
    <Popover.Trigger>
      <Button variant="soft">尺寸 3</Button>
    </Popover.Trigger>

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

  <Popover.Root>
    <Popover.Trigger>
      <Button variant="soft">尺寸 4</Button>
    </Popover.Trigger>

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

### [带内嵌内容](#带内嵌内容)

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

```jsx
<Popover.Root>
  <Popover.Trigger>
    <Button variant="soft">
      <Share2Icon width="16" height="16" />
      分享图片
    </Button>
  </Popover.Trigger>

  <Popover.Content width="360px">
    <Grid columns="130px 1fr">
      <Inset side="left" pr="current">
        <img
          src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?&auto=format&fit=crop&w=400&q=80"
          style={{ objectFit: "cover", width: "100%", height: "100%" }}
        />
      </Inset>

      <div>
        <Heading size="2" mb="1">
          分享这张图片
        </Heading>

        <Text as="p" size="2" mb="4" color="gray">
          极简主义的 3D 渲染壁纸。
        </Text>

        <Flex direction="column" align="stretch">
          <Popover.Close>
            <Button size="1" variant="soft">
              <Link1Icon width="16" height="16" />
              复制链接
            </Button>
          </Popover.Close>
        </Flex>
      </div>
    </Grid>
  </Popover.Content>
</Popover.Root>
```

<!--$-->

<!--/$-->