کارت هاور (HoverCard)

معرفی

کامپوننت HoverCard برای نمایش محتوا هنگام هاور روی یک المان استفاده می‌شود.

چه زمانی استفاده کنیم:

• برای preview پروفایل کاربران (آواتار، نام، بیو) هنگام hover روی نام کاربری
• برای نمایش خلاصه محتوا (مثلاً preview لینک) بدون نیاز به کلیک
• برای نمایش اطلاعات تکمیلی غنی (تصویر + متن) که فراتر از یک Tooltip ساده است

چه زمانی استفاده نکنیم:

• برای اطلاعات ضروری که همیشه باید نمایش داده شوند
• در رابط‌های موبایل‌اول — HoverCard روی touch کار نمی‌کند
• وقتی کاربر باید با محتوا تعامل داشته باشد — از Popover استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { HoverCard, HoverCardContent, HoverCardTrigger } from '@partodata/ui'
import { Avatar, AvatarFallback, AvatarImage, Button } from '@partodata/ui'

export default function MyComponent() {
  return (
    <HoverCard>
      {/* asChild الزامی است — بدون آن trigger یک <a> بدون href است و با کیبورد قابل رسیدن نیست */}
      <HoverCardTrigger asChild>
        <Button variant="link">@کاربر</Button>
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="flex gap-4">
          <Avatar>
            <AvatarImage src="/avatar.jpg" />
            <AvatarFallback>ک</AvatarFallback>
          </Avatar>
          <div>
            <h4 className="text-subheading">نام کاربر</h4>
            <p className="text-sm">توضیحات کاربر</p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

<HoverCardTrigger asChild>
  <Button variant="link">@کاربر</Button>
</HoverCardTrigger>

حالت‌ها و انواع

پیش‌فرض

راهنمای استفاده

جدول ویژگی‌ها

HoverCard

HoverCardContent

دسترسی‌پذیری

• trigger باید فوکوس‌پذیر باشد (asChild روی Button یا Link)؛ در غیر این صورت کارت با کیبورد باز نمی‌شود
• وقتی trigger فوکوس‌پذیر باشد، فوکوس کیبورد کارت را باز می‌کند و خروج فوکوس آن را می‌بندد
• با Escape بسته می‌شود
• روی دستگاه‌های لمسی باز نمی‌شود — اطلاعات ضروری را اینجا نگذارید
• مناسب برای محتوای preview — برای اکشن‌های مهم از Popover استفاده کنید

کامپوننت‌های مرتبط

• Tooltip — وقتی فقط یک خط متن ساده برای hover نیاز دارید (بدون تصویر یا ساختار غنی)
• Popover — وقتی محتوا تعاملی است و کاربر باید روی آن کلیک کند (نه فقط hover)