Popover

Kontrollü ve kontrolsüz durum destekleyen sabitlenmiş bağlamsal içerik.

Popover.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/popover.json

Kullanım Örneği

import { Button, Popover } from "@/components/ui"

<Popover trigger={<Button variant="outline">Ayrıntılar</Button>} align="start">
  <p>Bağlamsal içerik</p>
</Popover>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
trigger	ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>	—	Popover alanını açan buton öğesi.
children	ReactNode	—	Açılır panel içeriği.
open	boolean	—	Kontrollü açık/kapalı durumu.
defaultOpen	boolean	false	Kontrolsüz kullanım için ilk açık durum.
onOpenChange	(open: boolean) => void	—	Açık durum değiştiğinde çağrılır.
align	"start" \| "center" \| "end"	"center"	Panelin tetikleyiciye göre hizası.
side	"top" \| "bottom"	"bottom"	Panelin açılacağı yön.