دیگ

Hover Cardv1.0.0

کارتی که با توقف نشانگر روی یک لینک باز می‌شود و پیش‌نمایشی از مقصد نشان می‌دهد. محتوایش می‌تواند غنی باشد (تصویر، آمار، دکمه) ولی چون فقط با ماوس باز می‌شود، هیچ اطلاعات ضروری‌ای نباید تنها اینجا باشد.

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API — هنوز برای این کامپوننت پورت نشدهSvelte ۵ با runes — هنوز برای این کامپوننت پورت نشدهانگولار با signals و دایرکتیوهای standalone — هنوز برای این کامپوننت پورت نشده

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
npx digdesign@latest add https://docs.digdesign.ir/r/hover-card.json
pnpm dlx digdesign@latest add https://docs.digdesign.ir/r/hover-card.json
yarn dlx digdesign@latest add https://docs.digdesign.ir/r/hover-card.json
bunx --bun digdesign@latest add https://docs.digdesign.ir/r/hover-card.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

استفاده

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/profile">پروفایل</a>
  </HoverCardTrigger>
  <HoverCardContent>پیش‌نمایش پروفایل</HoverCardContent>
</HoverCard>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

ترکیب اجزا

ساختارش مثل پاپ‌اور است ولی محرک باز شدن، توقف نشانگر است نه کلیک: openDelay پیش‌فرض ۲۰۰ و closeDelay ۱۰۰ میلی‌ثانیه است تا عبور اتفاقی ماوس کارت را باز نکند و حرکت به سمت کارت هم آن را نبندد.

چون فوکوس داخل کارت نمی‌رود، محتوای تعاملی (فرم، ورودی) اینجا جای درستی ندارد؛ برای آن از پاپ‌اور استفاده کنید.

تفاوتش با راهنمای ابزار هم در حجم محتواست: راهنمای ابزار یک جملهٔ کوتاه، کارت شناور یک پیش‌نمایش کامل.

دسترس‌پذیری

  • کارت با فوکوس صفحه‌کلید روی تریگر هم باز می‌شود، ولی فوکوس داخل کارت منتقل نمی‌شود؛ پس دکمه‌های داخلش با Tab در دسترس نیستند.
  • هیچ اطلاعات ضروری‌ای را فقط اینجا نگذارید؛ کاربر لمسی و کاربر صفحه‌خوان ممکن است هرگز آن را نبینند.
  • تریگر باید خودش یک عنصر تعاملی معنادار باشد (لینک یا دکمه) تا در ناوبری صفحه‌کلید جا داشته باشد.
  • برای متن کوتاه توضیحی از راهنمای ابزار و برای محتوای تعاملی از پاپ‌اور استفاده کنید؛ کارت شناور بین این دو است.
  • openDelay را خیلی کوتاه نکنید؛ باز شدن ناگهانی کارت هنگام عبور ماوس آزاردهنده و برای کاربران با اختلال حرکتی گیج‌کننده است.

مرجع API

HoverCard

ویژگینوعپیش‌فرضتوضیح
openDelaynumber200میلی‌ثانیه مکث نشانگر تا باز شدن کارت؛ صفر یعنی فوری.
closeDelaynumber100مهلت بستن بعد از خروج نشانگر؛ فرصت می‌دهد ماوس روی خود کارت برود.
open / onOpenChangeboolean / (open: boolean) => void—مدیریت کنترل‌شدهٔ باز و بسته بودن.
defaultOpenbooleanfalseباز بودن در اولین رندر.

HoverCardTrigger

ویژگینوعپیش‌فرضتوضیح
asChildbooleanfalseرفتار تریگر را به فرزند می‌دهد؛ معمولاً یک لینک یا دکمه.

HoverCardContent

ویژگینوعپیش‌فرضتوضیح
side"top" | "right" | "bottom" | "left""bottom"جهت ترجیحی باز شدن؛ در نبود فضا خودکار برعکس می‌شود.
align"start" | "center" | "end""center"ترازِ کارت نسبت به تریگر؛ در حالت rtl مقدار start یعنی سمت راست.
sideOffsetnumber4فاصلهٔ کارت از تریگر بر حسب پیکسل.
collisionPaddingnumber | Padding0حاشیهٔ امن از لبه‌های صفحه هنگام محاسبهٔ موقعیت.
classNamestring—عرض پیش‌فرض w-64 است؛ برای محتوای بیشتر بازنویسی کنید.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.