البناء · جديد

بطاقة المعاينة

معاينة للقراءة فقط لما يشير إليه رابط، تظهر حين يستقر المؤشر عليه أو يصله التركيز.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/hover-card

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

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

<HoverCard>
  <HoverCardTrigger href="/people/noor">Noor Al-Hassan</HoverCardTrigger>
  <HoverCardContent>
    <HoverCardProfile name="Noor Al-Hassan" handle="@noor.designs" bio="Product designer in Amman." />
  </HoverCardContent>
</HoverCard>

أمثلة

تاجر، في الأعلى

‏side="top" على صف معاملة. النطاق يبقى من اليسار إلى اليمين، والأرقام تتبع إعداد الأرقام.

مرجع الخصائص

HoverCardTrigger

الخاصية	النوع	الافتراضي	الوصف
`href`	`string`		الرابط: يبقى رابطًا يُتبع بالنقر أو اللمس.
`delay`	`number`	`500`	كم ينتظر المؤشر على الرابط قبل الفتح (ملّي ثانية).
`closeDelay`	`number`	`300`	كم تبقى بعد مغادرة المؤشر الرابط والبطاقة.
`render`	`ReactElement`		رابطك الخاص، مثل `<Link />` من Next.

HoverCardContent

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		محتوى للقراءة فقط: بلا أزرار ولا روابط ولا حقول.
`side`	`"bottom" \| "top" \| "start" \| "end"`	`"bottom"`	خاصية Side. تنقلب إن لم تتسع.
`align`	`"start" \| "center" \| "end"`	`"center"`	المحاذاة على طول تلك الجهة.
`arrow`	`boolean`	`true`	السهم نحو الرابط.

HoverCardProfile

الخاصية	النوع	الوصف
`name`	`string`	خاصية Name، وحروف الصورة الرمزية.
`handle`	`string`	خاصية Handle: معرّف أو نطاق، من اليسار إلى اليمين.
`src`	`string`	صورة الشخص؛ وبدونها الحروف.
`bio`	`ReactNode`	خاصية Bio: سطران تقريبًا.
`facts`	`{ icon?; label }[]`	خاصية Meta: حقائق قصيرة بأيقونة.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	التركيز على الرابط يفتحها بعد المهلة، ومغادرته تغلقها.
`Esc`	يغلقها والتركيز باقٍ على الرابط.
`Enter`	يتبع الرابط.

ARIA

البطاقة إضافة بصرية: كل ما فيها موجود في الصفحة التي يفتحها الرابط، فقارئ الشاشة لا يفقد شيئًا.
لا عناصر تفاعلية فيها، لأنها تغلق حين يغادر المؤشر أو التركيز الرابط.
على الشاشات اللمسية يتبع النقر الرابط مباشرة.

ملاحظات العربية والاتجاه

ينعكس

الصورة الرمزية في البداية: على اليمين، والنص بعدها.
الحقائق تبدأ من اليمين، والأيقونة قبل كل نص.

لا ينعكس

المعرّفات والنطاقات (@noor.designs) تبقى من اليسار إلى اليمين.
أيقونات الموقع والتقويم لا تنعكس.

الأرقام: السنوات والأعداد في الحقائق تتبع إعداد الأرقام؛ نسّقها بـ formatNumber.
الخط العربي: الاسم label-16 Semibold، والمعرّف label-14، والنبذة body-14، والحقائق label-12.
النص ثنائي الاتجاه: الاسم في <bdi> والمعرّف في <bdi dir="ltr">، والنبذة dir="auto" لأنها قد تأتي بأي لغة.

كل المكونات ›