<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 原语 的道具。
包含弹出窗口的所有部分。
包装将打开弹出窗口的控件。
包含将在打开的弹出窗口中呈现的内容。此组件基于 div 元素。
| 道具 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
大小 | 响应式<"1" | "2" | "3" | "4"> | "2" |
宽度 | 响应式<字符串> | 无默认值 |
最小宽度 | 响应式<字符串> | 无默认值 |
最大宽度 | 响应式<字符串> | "480px" |
高度 | 响应式<字符串> | 无默认值 |
最小高度 | 响应式<字符串> | 无默认值 |
最大高度 | 响应式<字符串> | 无默认值 |
包装将关闭弹出窗口的控件。
使用 size 道具来控制弹出窗口的大小。它将影响 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>