Caroa UI

HoverCard

ホバー時に詳細情報を表示するカードコンポーネント。

インポート

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@caroainc/ui-components/client'

基本的な使い方

Loading...
<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#">@username</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex space-x-4">
      <Avatar>
        <AvatarImage src="/avatar.png" />
        <AvatarFallback>UN</AvatarFallback>
      </Avatar>
      <div>
        <h4 className="font-semibold">ユーザー名</h4>
        <p className="text-sm text-muted-foreground">
          プロフィールの説明文
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

リンクプレビュー

Loading...
<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">
      <Icon name="Link" />
      詳細を見る
    </Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="space-y-2">
      <h4 className="font-semibold">リンク先のタイトル</h4>
      <p className="text-sm text-muted-foreground">
        リンク先の説明文やプレビュー内容
      </p>
    </div>
  </HoverCardContent>
</HoverCard>

Props (HoverCardContent)

PropTypeDefaultDescription
side'top' | 'right' | 'bottom' | 'left''bottom'表示位置
align'start' | 'center' | 'end''center'配置

On this page