بطاقة عند التمرير

معاينة عائمة تظهر عند تمرير المؤشر فوقها — لمحات عن الملف الشخصي، ومعاينات الروابط، ومصطلحات المسرد — مع تطبيق أسلوب «النيوبروتاليست» في تصميم الحدود والظلال.

import {
  Avatar,
  AvatarFallback,

تُظهر بطاقة التمرير (hover card) لوحة تحتوي على محتوى معاينة غني فوق الصفحة عندما يستقر المؤشر على عنصر مشغّل — دون الحاجة إلى النقر. وهي مبنية على عنصر Base UI Preview Card الأساسي ومصممة وفقًا لأسلوب «النيوبروتالية»: حدود سميكة، وظلال حادة، وخط عريض.

استخدمه عندما:

نظرة سريعة على الملف الشخصي — مرر مؤشر الفأرة فوق @mention أو الصورة الرمزية لإظهار السيرة الذاتية والإحصائيات وزر المتابعة.
معاينات الروابط — اعرض عنوان الصفحة وملخصها قبل أن يقرر القارئ النقر عليها.
مصطلحات المسرد — قم بتعريف المصطلحات المتخصصة مباشرةً في المستندات دون الحاجة إلى الانتقال إلى صفحة أخرى.

التثبيت


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
npx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/hover-card.json

ثبِّت التبعيات التالية:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

انسخ والصق الكود التالي في مشروعك.

components/ui/hover-card.tsx

"use client"

import * as React from "react"
import { HoverCard as HoverCardPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function HoverCard({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
  )
}

function HoverCardContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded border-2 bg-popover p-2.5 text-sm text-popover-foreground shadow-md outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
          className
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  )
}

export { HoverCard, HoverCardTrigger, HoverCardContent }

حدِّث مسارات الاستيراد لتطابق إعداد مشروعك.

الاستخدام

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

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

التركيب

استخدم التركيب التالي لبناء HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

مُهَل التفعيل

استخدم delay وcloseDelay على المُشغِّل للتحكم في وقت فتح البطاقة وإغلاقها.

<HoverCard>
  <HoverCardTrigger delay={100} closeDelay={200}>
    Hover
  </HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

تحديد الموضع

استخدم الخاصيتين side وalign على HoverCardContent للتحكم في الموضع.

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Content
  </HoverCardContent>
</HoverCard>

أمثلة

أساسي

import {
  Avatar,
  AvatarFallback,

الجوانب

import { Button } from "@/components/ui/button"
import {
  HoverCard,

RTL

لتفعيل RTL في Neobrutalism، راجع دليل إعداد RTL.

"use client"

import {

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

لا توجد أنماط WAI-ARIA مخصصة لبطاقات التمرير — وأقرب نموذج مشابه هو Tooltip pattern. تفتح عنصر واجهة المستخدم الأساسي البطاقة عند تركيز لوحة المفاتيح على المشغل، وتغلقها باستخدام Escape. ومع ذلك، تعامل مع المحتوى على أنه تكميلي للمستخدمين المبصرين، واجعل العنصر المشغل رابطًا حقيقيًّا حتى يظل المحتوى الكامل متاحًا في وجهته.

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

مفتاح	الإجراء
`Tab` / `Shift + Tab`	نقل التركيز إلى المشغل — يؤدي التركيز إلى فتح البطاقة، بينما يؤدي تركها إلى إغلاقها
`Escape`	إغلاق البطاقة
`Enter`	اتباع رابط المشغل

مرجع API

لمزيد من المعلومات، راجع وثائق Base UI.