Üzerine gelince kart

Fareyle üzerine gelindiğinde açılan, neobrütalist tarzda kenarlık ve gölge efektlerine sahip yüzen önizlemeler — profil önizlemeleri, bağlantı önizlemeleri, sözlük terimleri.

import {
  Avatar,
  AvatarFallback,

Hover card, işaretçi bir tetikleyicinin üzerinde durduğunda sayfanın üzerinde zengin önizleme içeriği taşıyan bir panel açar — tıklamaya gerek yoktur. Base UI Preview Card primitifi üzerine kuruludur ve neobrütalist reçeteye göre stillendirilmiştir: kalın kenarlıklar, keskin gölgeler ve vurgulu tipografi.

Şu durumlarda tercih edin:

Profil önizlemeleri — bir @mention ya da avatarın üzerine gelindiğinde biyografiyi, istatistikleri ve takip düğmesini gösterin.
Bağlantı önizlemeleri — okuyucu tıklamaya karar vermeden önce sayfanın başlığını ve özetini gösterin.
Sözlük terimleri — dokümanlardaki teknik terimleri sayfadan ayrılmadan yerinde tanımlayın.

Kurulum


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

Aşağıdaki bağımlılıkları yükleyin:


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

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

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 }

İçe aktarma yollarını proje kurulumunuza uyacak şekilde güncelleyin.

Kullanım

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

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

Kompozisyon

Bir HoverCard oluşturmak için aşağıdaki kompozisyonu kullanın:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Tetikleyici Gecikmeleri

Kartın ne zaman açılıp kapanacağını kontrol etmek için tetikleyicide delay ve closeDelay kullanın.

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

Konumlandırma

Yerleşimi kontrol etmek için HoverCardContent üzerinde side ve align prop'larını kullanın.

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

Örnekler

Temel

import {
  Avatar,
  AvatarFallback,

Yönler

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

RTL

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import {

Erişilebilirlik

Hover card için özel bir WAI-ARIA deseni yoktur — en yakın karşılık Tooltip desenidir. Base UI primitifi, tetikleyici klavyeyle odaklandığında kartı açar ve Escape ile kapatır. Yine de içeriği gören kullanıcılar için tamamlayıcı bir öğe olarak değerlendirin ve içeriğin tamamına hedef sayfada ulaşılabilmesi için tetikleyiciyi gerçek bir bağlantı olarak tutun.

Klavye etkileşimleri:

Tuş	Eylem
`Tab` / `Shift + Tab`	Odağı tetikleyiciye taşır — odaklanmak kartı açar, ayrılmak kapatır
`Escape`	Kartı kapatır
`Enter`	Tetikleyici bağlantısını izler

API Referansı

Daha fazla bilgi için Base UI belgelerine bakın.