Bileşenler

Dialog

Sayfanın üzerinde açılan, bir görev ya da karar için odağı içinde tutan kalıcı pencere.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { Dialog } from '@bigbang/ui';
Kaynak: Dialog.tsx
Storybook: Dialog · Playground

Dialog, @bigbang/ui paketindedir.

import { Button, Dialog } from '@bigbang/ui';

<Dialog
  trigger={<Button>Pencereyi aç</Button>}
  title="Pencere başlığı"
  description="Pencere açıklaması burada yer alır."
  footer={
    <>
      <Dialog.Close>
        <Button variant="secondary">Vazgeç</Button>
      </Dialog.Close>
      <Button>Kaydet</Button>
    </>
  }
>
  Gövde içeriği
</Dialog>;

Parça prop tipleri de dışa açılır: DialogCloseProps.

Özellikler

titleZorunlu

Açıklama: Pencerenin başlığı; ekran okuyucu için pencereye ad verir. Zorunlu.
Tür: ReactNode

description

Açıklama: Başlığın altında bir ya da iki cümle; pencere açılınca başlıkla birlikte okunur.
Tür: ReactNode

children

Açıklama: Pencere gövdesinin içeriği. Ekrandan uzunsa kendi içinde kayar; başlık ve eylemler yerinde kalır.
Tür: ReactNode

trigger

Açıklama: Pencereyi açan öğe, genellikle bir Button. Pencereyi open ile yönetecekseniz vermeyin.
Tür: ReactElement

size

Açıklama: Panel genişliği: 400, 560, 720 ya da 960 px; full kenar boşluğu içinde ekranı doldurur. 640 px'ten dar ekranda kapatılabilir pencere alttan açılan sayfaya dönüşür.
Tür: DialogSize
Varsayılan: 'md'

dismissible

Açıklama: Pencerenin Escape, dışarı tıklama ve kapat butonuyla kapanabilmesi. Yalnızca oturumun bitmesi gibi zorunlu bir kararda kapatın; o zaman alttaki bir eylem pencereyi kapatmalıdır.
Tür: boolean
Varsayılan: true

open

Açıklama: Kontrollü açık durum. onOpenChange ile birlikte verin.
Tür: boolean

defaultOpen

Açıklama: Pencere kontrolsüz kullanıldığında ilk çizimdeki açık durum.
Tür: boolean
Varsayılan: false

onOpenChange

Açıklama: Tetikleyici, Escape, dışarı tıklama ya da kapat butonu durumu değiştirdiğinde yeni açık durumla çağrılır.
Tür: (open: boolean) => void

initialFocus

Açıklama: Pencere açılınca odağı alan öğe. Varsayılan olarak gövdedeki ilk odaklanabilir öğe, yoksa alttaki eylemler.
Tür: RefObject<HTMLElement | null>

closeLabel

Açıklama: Kapat butonunun erişilebilir adı. Varsayılanı ui.dialog.close kütüphane metnidir ("Kapat" ya da "Close").
Tür: string

material

Açıklama: 'solid', cam bir Provider altında diyaloğu opak tutar. Uzun metin, üçten fazla alanlı bir form ya da onay bloğu için verin; cam kısa onaylara uygundur.
Tür: 'auto' | 'solid'
Varsayılan: 'auto'

Parçalar

Dialog.Close: tek bir Button’ı sarar ve basılınca pencereyi kapatır.
Proplarla kurulamayan bir düzen için parçalar: Dialog.Root (tetikleyici, açık durum, dismissible), Dialog.Popup (size, dismissible, closeLabel, initialFocus), Dialog.Header, Dialog.Title, Dialog.Description, Dialog.Body, Dialog.Footer. Görünüm ve davranış prop API’siyle aynıdır; her pencerede bir Dialog.Title olur.

<Dialog.Root trigger={<Button>Önizle</Button>}>
  <Dialog.Popup size="xl">
    <Dialog.Header>
      <Dialog.Title>Toplu iade önizlemesi</Dialog.Title>
      <Dialog.Description>İade edilecek işlemler aşağıda listelenir.</Dialog.Description>
    </Dialog.Header>
    <Dialog.Body>…</Dialog.Body>
    <Dialog.Footer>
      <Dialog.Close>
        <Button variant="secondary">Vazgeç</Button>
      </Dialog.Close>
      <Button>İade et</Button>
    </Dialog.Footer>
  </Dialog.Popup>
</Dialog.Root>;

Veri öznitelikleri

data-component="dialog", data-size, data-dismissible: panel üzerinde.
data-part: backdrop, header, body, footer.
data-open, data-starting-style, data-ending-style, data-nested-dialog-open: Base UI’dan.