Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

弹出框

用于显示富文本内容的浮动元素，由按钮触发。

View sourceReport an issueView in Playground
<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>

API 参考

¥API Reference

此组件继承了 弹出框基础组件 的属性。

¥This component inherits props from the Popover primitive.

根

¥Root

包含弹出窗口的所有部分。

¥Contains all the parts of a popover.

触发器

¥Trigger

封装将打开弹出窗口的控件。

¥Wraps the control that will open the popover.

内容

¥Content

包含在打开的弹出窗口中呈现的内容。此组件基于 div 元素。

¥Contains content to be rendered in the open popover. This component is based on the div element.

PropTypeDefault
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

关闭

¥Close

封装将关闭弹出窗口的控件。

¥Wraps the control that will close the popover.

示例

¥Examples

尺寸

¥Size

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

¥Use the size prop to control size of the popover. It will affect the padding and border-radius of the Content. Use it in conjunction with the width/minWidth/maxWidth and height/minHeight/maxHeight props to control the size of the popover.

<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>

使用插入内容

¥With inset content

使用 插入 组件将内容与弹出窗口边缘对齐。

¥Use the Inset component to align content flush with the sides of the popover.

<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>
Previous插入
Next进度