用于显示丰富内容的浮动元素，触发方式为按钮。
<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>
该组件继承自 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 属性结合使用以控制弹出框的大小。
<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 组件使内容与弹出框的边缘对齐。
<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>