Drawer

Ne zaman kullanılır

Drawer, kullanıcı listeyi ya da sayfayı bırakmadan bir kaydın ayrıntısına bakacaksa, filtre seçecekse ya da kısa bir alt formu dolduracaksa kullanılır.

Ne zaman kullanılmaz

• Tek bir karar ya da kısa görev için: Dialog kullanın.
• Geri alınamaz işlem onayı için: AlertDialog kullanın.
• Uzun, çok adımlı akışlar için: Ayrı bir sayfa açın.
• Gezinme menüsü için: Uygulama kabuğunun gezinme bileşenini kullanın.

Anatomi

Paneli aç

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <Drawer
      trigger={<Button variant="secondary">Paneli aç</Button>}
      title="Panel başlığı"
      description="Panel açıklaması burada yer alır."
      footer={
        <Drawer.Close>
          <Button>Uygula</Button>
        </Drawer.Close>
      }
    >
      Panel içeriği burada yer alır. Sayfa arkada görünür kalır.
    </Drawer>
  );
}

1. Arka plan: Kalıcı panelde sayfayı karartır; kaydırırken açılır.
2. Panel: Yükseltilmiş zemin; yan panelin iç köşeleri, alt sayfanın üst ve üst sayfanın alt köşeleri 14 px yuvarlak; ekrana yaslanan kenar düz; ince kaplama çizgisi ve gölge.
3. Tutamaç: Yalnızca alt sayfada, handle ile; kaydırılabildiğini gösterir.
4. Başlık ve açıklama.
5. Gövde: Kendi içinde kayar.
6. Eylemler: Alt alta ve tam genişlik, altta sabit kalır.
7. Kapat butonu.

Davranış

• Tetikleyiciyle ya da kontrollü open ile açılır; odak gövdedeki ilk öğeye gider.
• Kalıcı panel odağı içinde tutar ve sayfayı etkisiz yapar; modal={false} iken sayfa kullanılabilir kalır.
• Escape, arka plana tıklama, kapat butonu, Drawer.Close ya da kenara doğru kaydırma kapatır; odak tetikleyiciye döner.
• Kaydırma sırasında panel parmağı izler ve arka plan açılır; bırakınca kapanır ya da yerine döner.
• 640 px’ten dar görünümde her panel alt sayfa olur.

Kenar seçimi

• Ayrıntı ve alt formlar için end; gezinme ya da sayfanın başındaki bir seçim için start; arama gibi kısa, üstten inen bir panel için top.

Yönergeler

• Paneli sayfadaki bir öğeyle ilişkili tutun; başlıkta o öğeyi adlandırın.
• Filtreler için modal={false} ve sm genişliği tercih edin.
• Kaydedilmemiş değişiklik varken kapatılırsa onay isteyin.
• Panel içinde panel açmayın.

İçerik

Türkçe	İngilizce
Panel başlığı	Panel title
Uygula	Apply
Sıfırla	Reset

İlgili bileşenler

• Dialog: Ortada açılan kalıcı pencere.
• AlertDialog: Kapatırken onay için.