팝오버

팝오버 (Popover)

버튼으로 트리거되는 풍부한 콘텐츠를 표시하는 플로팅 요소예요. Popover 프리미티브의 props를 상속받아요.

출처: 문서

본문

버튼으로 트리거되는, 풍부한 콘텐츠를 표시하는 플로팅 요소예요.

<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 프리미티브의 props를 상속받아요.

Root

팝오버의 모든 부분을 담고 있어요.

Trigger

팝오버를 열 컨트롤을 감싸요.

Content

열린 팝오버에 렌더링할 콘텐츠를 담고 있어요. 이 컴포넌트는 div 요소를 기반으로 해요.

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>

더 알아보기 (Learn more)

• Popover 프리미티브 — 기본 동작 살펴보기
• HoverCard 컴포넌트 — 호버로 여는 플로팅 요소