Dialog

Odaklanmış kararlar ve görevler için modal yüzey.

Dialog.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/dialog.json

Kullanım Örneği

import { Dialog } from "@/components/ui/Dialog"

<Dialog isOpen={open} onClose={() => setOpen(false)} title="Projeyi sil" variant="danger" footer={<Button>Onayla</Button>}>Bu işlem geri alınamaz.</Dialog>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
isOpen	boolean	—	Dialog görünürlüğü.
onClose	() => void	—	Kapatma isteğinde çağrılır.
title	ReactNode	—	Dialog başlığı.
description	ReactNode	—	Başlık açıklaması.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full"	"md"	Maksimum dialog genişliği.
variant	"default" \| "blueprint" \| "danger" \| "success"	"default"	Görsel ve semantik tema.
closeOnOverlayClick	boolean	true	Backdrop tıklamasında kapatır.
closeOnEscape	boolean	true	Escape tuşunda kapatır.
hideCloseButton	boolean	false	Kapatma kontrolünü gizler.
headingLevel	2 \| 3 \| 4 \| 5 \| 6	3	Dialog başlığının seviyesi.
closeLabel	string	"Dialogu kapat"	Kapatma düğmesinin etiketi.
footerLabel	string	"Dialog aksiyonları"	Footer aksiyon grubunun etiketi.