כרטיס ריחוף

תצוגה מקדימה צפה הנפתחת בעת העברת העכבר — הצצות לפרופילים, תצוגה מקדימה של קישורים, מונחים במילון — עם עיצוב ניאו-ברוטליסטי המשלב מסגרות וצללים.

import {
  Avatar,
  AvatarFallback,

ה-hover card מציף פאנל של תוכן תצוגה מקדימה עשיר מעל העמוד כשהסמן נח על טריגר — בלי צורך בלחיצה. נבנה על גבי הפרימיטיב Base UI Preview Card ומעוצב לפי המתכון הנאו-ברוטליסטי: מסגרות עבות, צללים חדים וטיפוגרפיה מודגשת.

השתמשו בו כש:

הצצות לפרופיל — מרחפים על @mention או avatar כדי להציג ביו, סטטיסטיקות וכפתור מעקב.
תצוגות מקדימות של קישורים — מעלים כותרת ותקציר של עמוד לפני שהקוראים מתחייבים ללחיצה.
מונחי מילון — מגדירים ז'רגון בתוך התיעוד בלי לנווט החוצה.

התקנה


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>

מיקום

השתמשו ב-props בשם 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 {

נגישות

ל-hover cards אין דפוס WAI-ARIA ייעודי — האנלוגיה הקרובה ביותר היא דפוס Tooltip. הפרימיטיב של Base UI פותח את הכרטיס בפוקוס מקלדת של הטריגר וסוגר אותו עם Escape. עדיין, התייחסו לתוכן כמשלים למשתמשים רואים והשאירו את הטריגר כקישור אמיתי כדי שהתוכן המלא יישאר נגיש ביעד שלו.

אינטראקציות מקלדת:

מקש	פעולה
`Tab` / `Shift + Tab`	מעבירים מוקד לטריגר — פוקוס פותח את הכרטיס, עזיבה סוגרת אותו
`Escape`	סוגרים את הכרטיס
`Enter`	עוקבים אחרי קישור הטריגר

תיעוד ה-API

למידע נוסף, עיינו בתיעוד של Base UI.