Hover Card
Fare ve klavye odağında tamamlayıcı bilgiyi gösteren zengin kart.
HoverCard.tsx
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/hover-card.jsonKullanım Örneği
import { HoverCard } from "@/components/ui"
<HoverCard trigger={<a href="/profile">@archintel</a>}>Profil özeti</HoverCard>Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| trigger | ReactElement | — | Kartı fare veya odak ile açan öğe. |
| children | ReactNode | — | Zengin kart içeriği. |
| openDelay | number | 150 | Açılmadan önceki milisaniye. |
| closeDelay | number | 100 | Kapanmadan önceki milisaniye. |
| align | "start" | "center" | "end" | "center" | Kartın tetikleyiciye hizası. |