Dialog

Ne zaman kullanılır

Dialog, kullanıcının sayfadan ayrılmadan tamamlaması gereken kısa ve odaklı bir görev ya da karar içindir: bir öğeyi düzenleme, ayarı onaylama, oturum sona erdiğinde yeniden giriş.

Ne zaman kullanılmaz

• Geri alınamaz bir işlemi onaylatmak için: AlertDialog kullanın.
• Listeyi görürken ayrıntı ya da filtre göstermek için: Drawer kullanın; sayfa bağlamı görünür kalır.
• Uzun, çok adımlı görevler için: Ayrı bir sayfa açın.
• Bilgi vermek için: Satır içi uyarı ya da kısa bildirim (Toast) yeterlidir; pencere kullanıcıyı durdurur.

Anatomi

Pencereyi aç

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <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>
          <Dialog.Close>
            <Button>Kaydet</Button>
          </Dialog.Close>
        </>
      }
    >
      Gövde içeriği burada yer alır. Pencereyi tek bir görevle sınırlı tutun.
    </Dialog>
  );
}

1. Arka plan: Sayfayı hafifçe karartıp bulanıklaştırır, tıklanınca pencereyi kapatır.
2. Panel: Yükseltilmiş zemin, 16 px köşe, 1 px ince çerçeve.
3. Başlık ve açıklama: Pencereye ad verir ve amacını anlatır.
4. Gövde: Uzunsa kendi içinde kayar.
5. Eylemler: Altta ayrı bir bantta, sağa yaslı, en önemlisi en sonda; 640 px altında alt alta, en önemlisi üstte.
6. Kapat butonu: Sağ üstte; zorunlu kararda yoktur.

Davranış

• Tetikleyiciyle ya da kontrollü open ile açılır.
• Açılınca odak gövdedeki ilk odaklanabilir öğeye, yoksa eylemlere gider; initialFocus bunu değiştirir.
• Odak pencerenin içinde döner; arkadaki sayfa etkisizdir ve kaydırılmaz.
• Escape, arka plana tıklama, kapat butonu ya da Dialog.Close ile kapanır; odak tetikleyiciye döner.
• dismissible={false} iken yalnızca bir eylemle kapanır.
• Gövde pencereden uzunsa kendi içinde kayar ve klavyeyle kaydırılabilsin diye sekme sırasına girer.
• 640 px’ten dar görünümde kapatılabilir pencere alttan açılan sayfa olur ve eylemler tam genişlikte alt alta dizilir.

Yönergeler

• Bir pencerede tek bir görev olsun.
• Başlığı görevi anlatan kısa bir ifadeyle yazın.
• Birincil eylemi bir fiille adlandırın ve en sona koyun.
• Pencere içinde pencere açmaktan kaçının.
• Kaydedilmemiş değişiklik varken kapatılırsa onay isteyin.

İçerik

• Başlık cümle düzeninde yazılır ve sonuna nokta konmaz.
• Açıklama bir ya da iki cümledir.
• Kapat butonunun adı ui.dialog.close kütüphane metninden gelir.

Türkçe	İngilizce
Pencere başlığı	Dialog title
Vazgeç	Cancel
Kaydet	Save

Cam

Provider material="glass" altında diyalog daha yüksek kontrastlı tonla cama döner, eylem bandı dolgusunu bırakır. material="solid" onu opak tutar. Cam kısa onaylara uygundur. Uzun metin, üçten fazla alanlı bir form ya da onay bloğu için material="solid" verin.

İlgili bileşenler

• AlertDialog: Tek soruluk onay penceresi.
• Button: Pencere eylemleri.
• Tooltip: Kısa ipucu, odak tutmaz.