Components · Drawer / Sheet

Drawer / Sheet

Sayfanın bir kenarından kayıp gelen ikincil yüzey. Modal'dan farkı: arkadaki sayfayla bağlamı koparmaz; kullanıcı detay incelerken ana ekranı görmeye devam eder. Sağdan açılan Detay drawer'ı, soldan Filter, alttan Bottom sheet (mobil-first).

01 · Right drawer · sipariş detayı

440px sabit, scroll içeride, footer sticky

↑ Sipariş tablosu (alttan görünüyor) — drawer arka planını engellemez

tablo satırı

02 · Left drawer · filter

içerik

03 · Bottom sheet · mobil

mobil ekran

Kurallar

· Drawer ↔ Modal: kullanıcının arka plana bakmaya ihtiyacı varsa drawer (sipariş detayını gözleyip listeyi de takip etmek); akış kesinleşmeli ve dikkat tek noktadaysa modal.
· Sağ drawer: detay görünümü (sipariş, müşteri, kayıt). Sol: filter / nav. Bottom sheet: mobil aksiyon menüsü, picker.
· Genişlik: right/left için 400-480px masaüstü; mobile fullscreen drawer'a düşer. Bottom sheet max-height 80vh.
· Header sticky, footer sticky, body scroll içeride. Asla iki scroll bar olmaz (drawer scroll'u sayfayı scroll etmez — body lock).
· Backdrop opaklığı .45 (ışık modu), .6 (koyu); blur 2px hafif. Dışarı tık ile kapanır; ⎋ ile kapanır; focus drawer içine hapsedilir (focus trap).
· Bottom sheet'te grab handle her zaman görünür — kullanıcı yukarı çekip yükseltebilir, aşağı sürükleyip kapatabilir.
· Drawer açılış animasyonu: slide-in 200ms cubic-bezier(.2,0,0,1), backdrop fade 150ms. Spring/bounce yasak.
· Erişilebilirlik: role="dialog" + aria-modal="true", ilk focus close'a değil ilk anlamlı eyleme verilir; ⎋ kapatır, focus geri dönüş noktasına teslim edilir.