ホバーカード

視覚的なユーザーがリンクの背後にあるコンテンツをプレビューするためのものです。

ソースコードを見る問題を報告する Playgroundで見る

フォロー @radix_ui で最新情報をチェックしてください。

<Text>
  Follow{' '}
  <HoverCard.Root>
    <HoverCard.Trigger>
      <Link href="#" 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リファレンス

このコンポーネントは、Hover Cardプリミティブからpropsを継承します。

Root

ホバーカードのすべての部分を含みます。

Trigger

ホバーカードを開くリンクをラップします。

Content

開いているホバーカードのコンテンツを含みます。このコンポーネントは、div要素に基づいています。

Prop	型	デフォルト
`asChild`	`boolean`	デフォルト値なし
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`width`	`Responsive<string>`	デフォルト値なし
`minWidth`	`Responsive<string>`	デフォルト値なし
`maxWidth`	`Responsive<string>`	`"480px"`
`height`	`Responsive<string>`	デフォルト値なし
`minHeight`	`Responsive<string>`	デフォルト値なし
`maxHeight`	`Responsive<string>`	デフォルト値なし

例

サイズ

size propを使用してサイズを制御します。

サイズ 1 サイズ 2 サイズ 3

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

インセットコンテンツ付き

Insetコンポーネントを使用して、コンテンツをホバーカードの側面に合わせて配置します。

テクノロジーはタイポグラフィーを20世紀後半に革命的に変えました。

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

前へドロップダウンメニュー

次へアイコンボタン

GitHubでこのページを編集する

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ