Drawer
İkincil iş akışları için ekran kenarından açılan panel.
Drawer.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/drawer.jsonKullanım Örneği
import { Drawer } from "@/components/ui/Drawer"
<Drawer isOpen={open} onClose={() => setOpen(false)} title="Filtreler" position="right">...</Drawer>Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| isOpen | boolean | — | Drawer görünürlüğü. |
| onClose | () => void | — | Kapatma isteğinde çağrılır. |
| title | ReactNode | — | Panel başlığı. |
| description | ReactNode | — | Panel açıklaması. |
| position | "left" | "right" | "top" | "bottom" | "right" | Açılma kenarı. |
| size | "sm" | "md" | "lg" | "xl" | "full" | "md" | Panel genişlik veya yükseklik ölçeği. |
| variant | "default" | "blueprint" | "default" | Görsel tema. |
| closeOnOverlayClick | boolean | true | Backdrop tıklamasında kapatır. |
| closeOnEscape | boolean | true | Escape tuşunda kapatır. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Drawer başlığının seviyesi. |
| closeLabel | string | "Drawerı kapat" | Kapatma düğmesinin etiketi. |
| footerLabel | string | "Drawer aksiyonları" | Footer aksiyon grubunun etiketi. |