호버 카드

호버 카드 (Hover Card)

시력이 있는 사용자가 링크 뒤의 콘텐츠를 미리 볼 수 있게 해 주는 컴포넌트예요. Hover Card 프리미티브의 props를 상속받아요.

출처: 문서

본문

시력이 있는 사용자가 링크 뒤의 콘텐츠를 미리 볼 수 있게 해 줘요.

<Text>
  Follow{" "}
  <HoverCard.Root>
    <HoverCard.Trigger>
      <Link href="https://twitter.com/radix_ui" target="_blank">
        @radix_ui
      </Link>
    </HoverCard.Trigger>

    <HoverCard.Content maxWidth="300px">
      <Flex gap="4">
        <Avatar
          size="3"
          fallback="R"
          radius="full"
          src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
        />

        <Box>
          <Heading size="3" as="h3">
            Radix
          </Heading>

          <Text as="div" size="2" color="gray" mb="2">
            @radix_ui
          </Text>

          <Text as="div" size="2">
            React components, icons, and colors for building high-quality, accessible UI.
          </Text>
        </Box>
      </Flex>
    </HoverCard.Content>
  </HoverCard.Root>{" "}
  for updates.
</Text>

API Reference

이 컴포넌트는 Hover Card 프리미티브의 props를 상속받아요.

Root

호버 카드의 모든 부분을 담고 있어요.

Trigger

호버 카드를 열 링크를 감싸요.

Content

열린 호버 카드의 콘텐츠를 담고 있어요. 이 컴포넌트는 div 요소를 기반으로 해요.

예제 (Examples)

Size

size prop으로 크기를 제어해요.

<Flex gap="4">
  <HoverCard.Root>
    <HoverCard.Trigger>
      <Link href="#">Size 1</Link>
    </HoverCard.Trigger>

    <HoverCard.Content size="1" maxWidth="240px">
      <Text as="div" size="1" trim="both">
        <Strong>Typography</Strong> is the art and technique of arranging type to make written
        language legible, readable and appealing when displayed.
      </Text>
    </HoverCard.Content>
  </HoverCard.Root>

  <HoverCard.Root>
    <HoverCard.Trigger>
      <Link href="#">Size 2</Link>
    </HoverCard.Trigger>

    <HoverCard.Content size="2" maxWidth="280px">
      <Text as="div" size="2" trim="both">
        <Strong>Typography</Strong> is the art and technique of arranging type to make written
        language legible, readable and appealing when displayed.
      </Text>
    </HoverCard.Content>
  </HoverCard.Root>

  <HoverCard.Root>
    <HoverCard.Trigger>
      <Link href="#">Size 3</Link>
    </HoverCard.Trigger>

    <HoverCard.Content size="3" maxWidth="320px">
      <Text as="div" size="3" trim="both">
        <Strong>Typography</Strong> is the art and technique of arranging type to make written
        language legible, readable and appealing when displayed.
      </Text>
    </HoverCard.Content>
  </HoverCard.Root>
</Flex>

With inset content

Inset 컴포넌트를 사용해 콘텐츠를 호버 카드 가장자리에 딱 맞게 정렬해요.

<Text>
  Technology revolutionized{" "}
  <HoverCard.Root>
    <HoverCard.Trigger>
      <Link href="#">typography</Link>
    </HoverCard.Trigger>

    <HoverCard.Content width="450px">
      <Flex>
        <Box asChild flexShrink="0">
          <Inset side="left" pr="current">
            <img
              src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?&auto=format&fit=crop&w=300&q=90"
              alt="Bold typography"
              style={{
                display: "block",
                objectFit: "cover",
                height: "100%",
                width: 150,
                backgroundColor: "var(--gray-5)",
              }}
            />
          </Inset>
        </Box>

        <Text size="2" as="p">
          <Strong>Typography</Strong> is the art and technique of arranging type to make written
          language legible, readable and appealing when displayed. The arrangement of type involves
          selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing
          (tracking)…
        </Text>
      </Flex>
    </HoverCard.Content>
  </HoverCard.Root>{" "}
  in the latter twentieth century.
</Text>

더 알아보기 (Learn more)

• Hover Card 프리미티브 — 기본 동작 살펴보기
• Popover 컴포넌트 — 클릭으로 여는 플로팅 요소