Popover

버튼에 의해 트리거되는 풍부한 콘텐츠를 표시하는 플로팅 요소입니다.

View source Report an issue View 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 Reference

이 컴포넌트는 Popover primitive의 props를 상속받습니다.

Root

팝오버의 모든 부분을 포함하는 컴포넌트입니다.

Trigger

팝오버를 열 컨트롤을 감싸는 컴포넌트입니다.

Content

열린 팝오버에 표시될 내용을 포함합니다. 이 컴포넌트는 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

Close

팝오버를 닫을 컨트롤을 감싸는 컴포넌트입니다.

Examples

Size

size prop을 사용하여 팝오버의 크기를 제어합니다. 이는 Content의 padding과 border-radius에 영향을 미칩니다. width/minWidth/maxWidth와 height/minHeight/maxHeight props와 함께 사용하여 팝오버의 크기를 제어하세요.

<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

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>

PreviousPagination

NextProgress

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities