UI KIT · APPLICATION · CRUD DRAWER
Kenardan açılan panel.
Yeni bir bileşen yerine, tek bir konumlandırma sınıfı: .ck-drawer. Hem native <dialog> hem de [popover] ile birleşir — hangisini seçtiğiniz, panelin tam modal (odak tuzaklı) mı yoksa hafif/kolay-kapanan mı olacağını belirler. Karar ve dist/ckcss.min.css bütçe ölçümü ADR 0020'de.
Bu önizleme <dialog class="ck-dialog ck-drawer" open> ile tam modal bir çekmece gösterir — odak içeride tutulur, arkaplan etkileşimsizdir. examples/components.html'deki gibi kasıtlı olarak açık gösteriliyor.
Alternatif: hafif/kolay-kapanan çekmece
Kullanıcının sayfanın geri kalanıyla etkileşime devam edebildiği filtre veya hızlı-bakış panelleri için, aynı .ck-drawer sınıfını <dialog> yerine native [popover] ile birleştirin:
<button popovertarget="filter-drawer">Filtreler</button>
<div popover id="filter-drawer" class="ck-drawer">
<!-- filtre formu -->
</div>Bu sürüm; Escape veya dışarı tıklamayla kendiliğinden kapanır (native popover davranışı), ama <dialog>'un aksine odağı zorla içeride tutmaz — bu yüzden sayfayı bloklamaması gereken paneller için tercih edilir (örn. facetli arama filtreleri, hızlı sepet önizlemesi).
Aynı kompozisyon, tam sayfa sepet'in off-canvas/mini-sepet varyantı için de kullanılır: <div popover class="ck-drawer"> içine sepet özetini koyup tetikleyici butona popovertarget eklemek yeterlidir — ayrı bir sayfa veya bileşen gerekmez.
Tokenlar: ck-drawer (yeni, sadece konumlandırma — renk/gölge/yazı tipi tokenı taşımaz, bunlar ck-dialog/[popover]'dan miras alınır). Duyarlı davranış: max-inline-size: min(24rem, 100vw) dar ekranlarda paneli tam genişliğe yaklaştırır.
SONRAKİ ADIM