Çekmece
Ekranın yanından kayarak açılan panel. Kaydın ayrıntısı, kısa bir form ya da liste sayfalarının filtreleri gibi sayfadan ayrılmadan bakılacak içerik için kullanılır.
Temel kullanım
Panel benzersiz name değeriyle açılır: acun:drawer.trigger, acun:drawer:open olayı ya da JavaScript'te AcunUI.drawer.open('catalog-details'). Başlıktaki X, Esc tuşu, arka plana tıklama ve panel içindeki bir bağlantıya tıklama paneli kapatır. Açılınca odak autofocus verilen alana, yoksa paneldeki ilk odaklanabilir öğeye geçer; Tab ile panelin içinde döner, kapanınca açan düğmeye geri gelir. Panel açıkken arkadaki sayfa kaymaz.
<acun:drawer.trigger name="catalog-details"><acun:button variant="white">Müşteri özetini aç</acun:button></acun:drawer.trigger>
<acun:drawer name="catalog-details" title="Müşteri özeti">
<dl class="space-y-3 text-sm">
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Üyelik</dt><dd>Premium</dd></div>
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Sipariş sayısı</dt><dd>5</dd></div>
</dl>
<acun:slot:footer>
<acun:drawer.close><acun:button variant="white">Kapat</acun:button></acun:drawer.close>
<acun:button>Düzenle</acun:button>
</acun:slot:footer>
</acun:drawer>| Prop | Değerler |
|---|---|
name | Benzersiz ad |
title | Başlık satırı (X düğmesiyle) |
footer | Slot: alt çubuk |
Taraf ve genişlik
side panelin hangi kenardan açılacağını seçer; varsayılan right. Genişlik size ile (md ≈ 448px, sm ≈ 320px) ya da doğrudan bir max-w-* sınıfı veren width ile ayarlanır. Dar ekranlarda panel ekranın %85'ini kaplar.
<div class="flex flex-wrap gap-2" x-data>
<acun:drawer.trigger name="catalog-left"><acun:button variant="white">Soldan, sm</acun:button></acun:drawer.trigger>
<acun:drawer.trigger name="catalog-wide"><acun:button variant="white">Sağdan, max-w-2xl</acun:button></acun:drawer.trigger>
</div>
<acun:drawer name="catalog-left" side="left" size="sm" title="Kısayollar">
<p class="text-sm">Soldan açılan dar panel.</p>
</acun:drawer>
<acun:drawer name="catalog-wide" width="max-w-2xl" title="Sipariş geçmişi">
<p class="text-sm">Tablo gibi geniş içerik için daha geniş panel.</p>
</acun:drawer>| Prop | Değerler |
|---|---|
side | right | left |
size | sm | md |
width | max-w-* sınıfı (size yerine geçer) |
Yüzen panel
floating paneli ekran kenarlarından biraz içeride, köşeleri yuvarlatılmış bir kart gibi gösterir. Kısa ve bağımsız içerikler için uygundur.
<acun:drawer.trigger name="catalog-floating"><acun:button variant="white">Yüzen paneli aç</acun:button></acun:drawer.trigger>
<acun:drawer name="catalog-floating" floating title="Bildirimler">
<ul class="space-y-3 text-sm">
<li>Kadıköy deposundan 12 sipariş kargolandı.</li>
<li>Ayşe Yılmaz yeni bir müşteri ekledi.</li>
</ul>
</acun:drawer>| Prop | Değerler |
|---|---|
floating | true | false |
Özel başlık
header slot'u standart başlık satırının yerini alır; avatar ya da sekme gibi zengin bir üst alan kurabilirsiniz. Bu durumda X düğmesi eklenmez, kapatma düğmesini close() ile kendiniz koyun ve panele aria-label verin.
<acun:drawer.trigger name="catalog-person"><acun:button variant="white">Destek uzmanını göster</acun:button></acun:drawer.trigger>
<acun:drawer name="catalog-person" aria-label="Destek uzmanı">
<acun:slot:header>
<div class="flex items-center gap-3 pb-4">
<acun:avatar name="Ayşe Yılmaz" />
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-gray-900 dark:text-zinc-100">Ayşe Yılmaz</p>
<p class="text-xs text-gray-500 dark:text-zinc-400">Destek uzmanı · Kurumsal müşteriler</p>
</div>
<acun:drawer.close><acun:button variant="ghost" size="icon" aria-label="Kapat"><acun:icon name="x-mark" /></acun:button></acun:drawer.close>
</div>
</acun:slot:header>
<p class="text-sm">Bu ay 112 destek talebini yanıtladı.</p>
</acun:drawer>| Prop | Değerler |
|---|---|
header | Slot: başlık satırının yerine |
aria-label | Başlık yokken erişilebilir ad |
Arka plansız
:backdrop="false" karartmayı kaldırır; panelin dışına tıklamak yine paneli kapatır (bunu closable-on-backdrop belirler). :lock-scroll="false" panel açıkken arkadaki sayfanın kaymasına izin verir. Değerleri iki nokta üst üste ile verin.
<acun:drawer.trigger name="catalog-plain"><acun:button variant="white">Arka plansız aç</acun:button></acun:drawer.trigger>
<acun:drawer name="catalog-plain" title="Yardım" :backdrop="false" :lock-scroll="false">
<p class="text-sm">Sayfa görünür kalırken yan tarafta yardım metni.</p>
</acun:drawer>| Prop | Değerler |
|---|---|
backdrop | true | false |
lock-scroll | true | false |
Form paneli
:closable-on-backdrop="false" ile arka plana tıklamak paneli kapatmaz; yarım kalan bir formun yanlışlıkla kapanmasını önler. Panel yine X, Esc ve kapatma düğmesiyle kapanır. Açılınca odak autofocus verilen alana geçer.
<acun:drawer.trigger name="catalog-form"><acun:button variant="white">Not ekle</acun:button></acun:drawer.trigger>
<acun:drawer name="catalog-form" :closable-on-backdrop="false">
<acun:drawer.header title="Sipariş notu" description="#10482 · Ayşe Yılmaz" />
<acun:drawer.body class="space-y-4">
<acun:input name="konu" label="Konu" />
<acun:textarea name="not" label="Not" rows="4" autofocus />
</acun:drawer.body>
<acun:drawer.footer>
<acun:drawer.close><acun:button variant="white">Vazgeç</acun:button></acun:drawer.close>
<acun:drawer.close><acun:button>Kaydet</acun:button></acun:drawer.close>
</acun:drawer.footer>
</acun:drawer>| Prop | Değerler |
|---|---|
closable-on-backdrop | true | false |
autofocus | Açılınca odaklanacak alan |
Livewire ile bağlama
wire:model paneli bir Livewire özelliğine bağlar: özellik true olunca panel açılır, false olunca kapanır. Kullanıcı paneli kapatınca (X, Esc, arka plan) özellik de false olur; wire:model bunu sonraki istekle, wire:model.live hemen gönderir. Böylece paneli sunucudan, olay göndermeden açarsınız. Alpine verisine x-model ile aynı şekilde bağlanır; değişkene panelin kendi durum adlarından (rendered, entered, opened, model) farklı bir ad verin.
<acun:button wire:click="detayGoster(4821)">Sipariş detayı</acun:button>
<acun:drawer name="siparis-detay" wire:model="detayAcik">
<acun:drawer.header :title="'Sipariş #'.$siparisNo" description="Kadıköy deposu · 3 ürün" />
<acun:drawer.body>
<p class="text-sm">Alıcı: Ayşe Yılmaz · Durum: Hazırlanıyor</p>
</acun:drawer.body>
<acun:drawer.footer>
<acun:drawer.close><acun:button variant="white">Kapat</acun:button></acun:drawer.close>
<acun:button wire:click="kargoyaVer">Kargoya ver</acun:button>
</acun:drawer.footer>
</acun:drawer>| Prop | Değerler |
|---|---|
wire:model · wire:model.live | Livewire özelliği (bool) |
x-model | Alpine verisi (bool) |
Livewire bileşeni
Önceki örneğin bileşeni. Paneli açmak için özelliği true yapmak yeterli.
use Livewire\Component;
class SiparisDetay extends Component
{
public bool $detayAcik = false;
public ?int $siparisNo = null;
public function detayGoster(int $no): void
{
$this->siparisNo = $no;
$this->detayAcik = true;
}
public function kargoyaVer(): void
{
// … kaydı güncelle
$this->detayAcik = false;
}
}Olaylar
Panel acun:drawer:open, acun:drawer:close ve acun:drawer:toggle olaylarını { name } ile dinler; acun:drawer:close ad olmadan gönderilirse açık panellerin hepsi kapanır. JavaScript'te aynı komutlar AcunUI.drawer.open('…'), AcunUI.drawer.close('…') ve AcunUI.drawer.toggle('…') ile verilir. Panel açılınca acun:drawer:opened, kapanmaya başladığı anda acun:drawer:closed olayını { name } ile yayar. İlk adlar (open-drawer, close-drawer, toggle-drawer ve { name, open } taşıyan drawer-state-changed) de çalışmaya devam eder. Panelin içindeki açık bir menü ya da açılır kutu Esc tuşunu önce kendisi kullanır; panel bir sonraki Esc ile kapanır.
<div class="flex items-center gap-3" x-data="{ acik: false }"
x-on:acun:drawer:opened.window="if ($event.detail.name === 'catalog-notes') acik = true"
x-on:acun:drawer:closed.window="if ($event.detail.name === 'catalog-notes') acik = false">
<acun:drawer.trigger name="catalog-notes" toggle><acun:button variant="white">Notlar</acun:button></acun:drawer.trigger>
<span class="text-sm" x-text="acik ? 'Panel açık' : 'Panel kapalı'"></span>
</div>
<acun:drawer name="catalog-notes" title="Notlar">
<p class="text-sm">Müşteri görüşmesinde alınan notlar.</p>
</acun:drawer>| Prop | Değerler |
|---|---|
acun:drawer:open · acun:drawer:close · acun:drawer:toggle | Dinlenen olaylar ({ name }) |
AcunUI.drawer.open · close · toggle | Aynı komutlar JavaScript'ten (ad) |
acun:drawer:opened · acun:drawer:closed | Yayılan olaylar ({ name }) |
Filtreler paneli (docked)
docked liste sayfalarının Filtreler paneli içindir: masaüstünde (1024px ve üstü) sol kenara sabitlenir ve hazır düzenlerde içeriği sağa iter, odak sayfada kalır; daha dar ekranlarda arka planlı bir çekmece olur, odağı alır ve içinde tutar. Bu kipte başlık satırı çizilmez (title yalnızca erişilebilir ad olur), side, size, width, floating, backdrop ve header kullanılmaz. compact alt çubuktaki boşlukları daraltır.
<acun:filter-button drawer="catalog-filters" :count="1" />
<acun:drawer name="catalog-filters" docked title="Filtreler" compact>
<div class="space-y-4">
<acun:input name="f_kod" placeholder="Özel Kod" />
<acun:select name="f_durum" :options="['' => 'Tüm Durumlar', '1' => 'Aktif', '0' => 'Pasif']" />
</div>
<acun:slot:footer>
<acun:button variant="outline" size="sm" class="flex-1">Temizle</acun:button>
<acun:drawer.close><acun:button variant="outline-danger" size="sm" class="flex-1">Kapat</acun:button></acun:drawer.close>
</acun:slot:footer>
</acun:drawer>| Prop | Değerler |
|---|---|
docked | true | false |
compact | true | false (alt çubuk boşluğu) |
Parçalı kullanım
Çekmeceyi acun:drawer.trigger açar (toggle ile aç-kapa yapar; aria-expanded kendiliğinden güncellenir). Panel acun:drawer.header, acun:drawer.body ve acun:drawer.footer parçalarıyla kurulur; acun:drawer.close içindeki düğme paneli kapatır.
<acun:drawer.trigger name="siparis-4821">
<acun:button variant="white">Sipariş detayı</acun:button>
</acun:drawer.trigger>
<acun:drawer name="siparis-4821">
<acun:drawer.header title="Sipariş #4821" description="Kadıköy deposu · 3 ürün · Temsilci: Ayşe Yılmaz" />
<acun:drawer.body class="space-y-4">
<acun:input name="alici" label="Alıcı" value="Mehmet Kaya" />
<acun:select name="durum" label="Sipariş durumu" :options="['hazirlaniyor' => 'Hazırlanıyor', 'kargoda' => 'Kargoda', 'teslim-edildi' => 'Teslim edildi']" />
<acun:textarea name="not" label="Temsilci notu" rows="3" />
</acun:drawer.body>
<acun:drawer.footer>
<acun:drawer.close>
<acun:button variant="white">Vazgeç</acun:button>
</acun:drawer.close>
<acun:drawer.close>
<acun:button x-on:click="$dispatch('toast', { type: 'success', message: 'Sipariş güncellendi.' })">Kaydet</acun:button>
</acun:drawer.close>
</acun:drawer.footer>
</acun:drawer>| Prop | Değerler |
|---|---|
acun:drawer.trigger | name, toggle |
acun:drawer.header | title, description |
acun:drawer.body · footer | Gövde ve alt çubuk |
acun:drawer.close | İçindeki öğe paneli kapatır |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
name | — | Zorunlu. acun:drawer:open · acun:drawer:close · acun:drawer:toggle olaylarındaki ve AcunUI.drawer.open('…') çağrısındaki ad; acun:drawer:opened · acun:drawer:closed bu adı taşır |
title | null | Başlık satırı (X ile) ve erişilebilir ad |
side | right | right · left |
size | md | md (max-w-md) · sm (max-w-xs) |
width | null | max-w-* sınıfı; verilirse size kullanılmaz |
floating | false | Kenarlardan içeride, yuvarlak köşeli panel |
backdrop | true | Arka planı karartır |
lock-scroll | true | Açıkken sayfanın kaymasını engeller |
closable-on-backdrop | true | Arka plana tıklayınca kapanır |
wire:model · x-model | — | Açık/kapalı durumu bir Livewire özelliğine ya da Alpine verisine bağlar |
compact | false | Alt çubukta dar boşluklar |
docked | false | Liste sayfalarının Filtreler paneli davranışı |
aria-label | null | Başlık yokken erişilebilir ad; boşsa "Menü" |
body-class | flex-1 p-5 overflow-y-auto | Gövde sarmalayıcısının sınıfları |
drawer.trigger: name · toggle | — | Paneli açar; toggle ile açıksa kapatır. Düğmeye aria-expanded eklenir |
drawer.header: title · description | null | Başlık satırı ve X |
drawer.body · drawer.footer | — | Kayan gövde ve alt çubuk (compact ve docked ayarlarına uyar) |
drawer.close | — | İçindeki öğeye tıklanınca panel kapanır |