用于显示富内容的浮动元素，由按钮触发。
<Popover.Root>
<Popover.Trigger>
<Button variant="soft">
<ChatBubbleIcon width="16" height="16" />
Comment
</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="Write a comment…" style={{ height: 80 }} />
<Flex gap="3" mt="3" justify="between">
<Flex align="center" gap="2" asChild>
<Text as="label" size="2">
<Checkbox />
<Text>Send to group</Text>
</Text>
</Flex>
<Popover.Close>
<Button size="1">Comment</Button>
</Popover.Close>
</Flex>
</Box>
</Flex>
</Popover.Content>
</Popover.Root>
此组件继承自Popover primitive的 props。
包含弹出框的所有部分。
包裹将打开弹出框的控件。
包含要在打开的弹出框中呈现的内容。此组件基于 div 元素。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
size | 响应式<"1" | "2" | "3" | "4"> | "2" |
width | 响应式<string> | 无默认值 |
minWidth | 响应式<string> | 无默认值 |
maxWidth | 响应式<string> | "480px" |
height | 响应式<string> | 无默认值 |
minHeight | 响应式<string> | 无默认值 |
maxHeight | 响应式<string> | 无默认值 |
包裹将关闭弹出框的控件。
使用 size 属性来控制弹出框的尺寸。它会影响 Content 的 padding 和 border-radius。将其与 width/minWidth/maxWidth 和 height/minHeight/maxHeight 属性结合使用，以控制弹出框的尺寸。
<Flex gap="4" align="center">
<Popover.Root>
<Popover.Trigger>
<Button variant="soft">Size 1</Button>
</Popover.Trigger>
<Popover.Content size="1" maxWidth="300px">
<Text as="p" trim="both" size="1">
The quick brown fox jumps over the lazy dog.
</Text>
</Popover.Content>
</Popover.Root>
<Popover.Root>
<Popover.Trigger>
<Button variant="soft">Size 2</Button>
</Popover.Trigger>
<Popover.Content size="2" maxWidth="400px">
<Text as="p" trim="both" size="2">
The quick brown fox jumps over the lazy dog.
</Text>
</Popover.Content>
</Popover.Root>
<Popover.Root>
<Popover.Trigger>
<Button variant="soft">Size 3</Button>
</Popover.Trigger>
<Popover.Content size="3" maxWidth="500px">
<Text as="p" trim="both" size="3">
The quick brown fox jumps over the lazy dog.
</Text>
</Popover.Content>
</Popover.Root>
<Popover.Root>
<Popover.Trigger>
<Button variant="soft">Size 4</Button>
</Popover.Trigger>
<Popover.Content size="4">
<Text as="p" trim="both" size="4">
The quick brown fox jumps over the lazy dog.
</Text>
</Popover.Content>
</Popover.Root>
</Flex>
使用 Inset 组件使内容与弹出框的侧边对齐。
<Popover.Root>
<Popover.Trigger>
<Button variant="soft">
<Share2Icon width="16" height="16" />
Share image
</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">
Share this image
</Heading>
<Text as="p" size="2" mb="4" color="gray">
Minimalistic 3D rendering wallpaper.
</Text>
<Flex direction="column" align="stretch">
<Popover.Close>
<Button size="1" variant="soft">
<Link1Icon width="16" height="16" />
Copy link
</Button>
</Popover.Close>
</Flex>
</div>
</Grid>
</Popover.Content>
</Popover.Root>