Açılır menü
Bir düğmeye tıklayınca altında açılan işlem listesi. Dışa aktarma seçenekleri ya da satır işlemleri gibi, ekranda sürekli yer kaplaması gerekmeyen işlemleri toplar.
Temel kullanım
Tetikleyici trigger slot'una, öğeler varsayılan slot'a acun:dropdown.item olarak yazılır. Menü dışarı tıklayınca, Esc tuşuyla ya da bir öğe seçilince kapanır.
<acun:dropdown align="start">
<acun:slot:trigger>
<acun:button variant="white">Dışa aktar</acun:button>
</acun:slot:trigger>
<acun:dropdown.item>Excel (.xlsx)</acun:dropdown.item>
<acun:dropdown.item>PDF</acun:dropdown.item>
<acun:dropdown.item>CSV</acun:dropdown.item>
</acun:dropdown>| Prop | Değerler |
|---|---|
trigger | Slot: menüyü açan öğe |
Hizalama
Menü varsayılan olarak tetikleyicinin sağ kenarına hizalanır (end); sayfanın sağındaki düğmeler için uygundur. Soldaki düğmelerde align="start" kullanın.
<div class="flex justify-between">
<acun:dropdown align="start">
<acun:slot:trigger><acun:button variant="white">Sola hizalı</acun:button></acun:slot:trigger>
<acun:dropdown.item>Müşteriye göre</acun:dropdown.item>
<acun:dropdown.item>Tarihe göre</acun:dropdown.item>
</acun:dropdown>
<acun:dropdown>
<acun:slot:trigger><acun:button variant="white">Sağa hizalı</acun:button></acun:slot:trigger>
<acun:dropdown.item>Müşteriye göre</acun:dropdown.item>
<acun:dropdown.item>Tarihe göre</acun:dropdown.item>
</acun:dropdown>
</div>| Prop | Değerler |
|---|---|
align | start | end |
Yukarı açılan
Sayfanın altındaki tetikleyicilerde menü ekrandan taşmasın diye position="top" ile yukarı açın.
<acun:dropdown position="top" align="start">
<acun:slot:trigger><acun:button variant="white">Toplu işlem</acun:button></acun:slot:trigger>
<acun:dropdown.item>Aktifleştir</acun:dropdown.item>
<acun:dropdown.item>Pasifleştir</acun:dropdown.item>
<acun:dropdown.item>Arşivle</acun:dropdown.item>
</acun:dropdown>| Prop | Değerler |
|---|---|
position | bottom | top |
Tam genişlik
full-width hem tetikleyiciyi hem menüyü kapsayıcının genişliğine yayar. Dar yan panellerde ve mobil görünümlerde seçim listesi gibi kullanılır.
<acun:dropdown full-width>
<acun:slot:trigger><acun:button variant="white" class="w-full justify-between">Kadıköy mağazası <acun:icon name="chevron-down" size="4" /></acun:button></acun:slot:trigger>
<acun:dropdown.item>Beşiktaş mağazası</acun:dropdown.item>
<acun:dropdown.item>Kadıköy mağazası</acun:dropdown.item>
<acun:dropdown.item>Üsküdar mağazası</acun:dropdown.item>
</acun:dropdown>| Prop | Değerler |
|---|---|
full-width | true | false |
Öğeler
href verilen öğe bağlantı (a), verilmeyen öğe düğme olarak çizilir; düğmelere wire:click ya da x-on:click ekleyebilirsiniz. Başka bir siteye giden bağlantılarda external verin: bağlantı yeni sekmede açılır, sağında küçük bir ok ikonu görünür ve ekran okuyucuya "(yeni sekmede açılır)" notu okunur. Öğeler ikon alabilir, gruplar arasına ince bir çizgi koyabilirsiniz. Uzun listeler 16rem yükseklikten sonra kayar.
<acun:dropdown align="start">
<acun:slot:trigger>
<acun:button variant="ghost" size="icon" aria-label="Satır işlemleri"><acun:icon name="ellipsis-vertical" /></acun:button>
</acun:slot:trigger>
<acun:dropdown.item href="#"><acun:icon name="eye" size="4" />Görüntüle</acun:dropdown.item>
<acun:dropdown.item><acun:icon name="pencil-square" size="4" />Düzenle</acun:dropdown.item>
<acun:dropdown.item x-on:click="$dispatch('toast', { message: 'Ürün kopyalandı.' })"><acun:icon name="document-duplicate" size="4" />Kopyala</acun:dropdown.item>
<div class="my-1 border-t border-gray-100 dark:border-zinc-800"></div>
<acun:dropdown.item><acun:icon name="archive-box" size="4" />Arşivle</acun:dropdown.item>
<div class="my-1 border-t border-gray-100 dark:border-zinc-800"></div>
<acun:dropdown.item href="#" external><acun:icon name="question-mark-circle" size="4" />Yardım merkezi</acun:dropdown.item>
</acun:dropdown>| Prop | Değerler |
|---|---|
href | Verilirse bağlantı, yoksa düğme |
external | true | false (href ile: yeni sekme, ok ikonu, ekran okuyucu notu) |
Parçalı kullanım
Menüyü acun:dropdown.trigger ve acun:dropdown.content parçalarıyla yazın; öğeler acun:dropdown.item (icon, danger), grup başlıkları acun:dropdown.heading, ayraçlar acun:dropdown.separator. Menü ok tuşları, Home/End ve Esc ile kullanılır. dropdown.content'e verilen class (ör. w-60) menü kutusuna eklenir.
<acun:dropdown align="end">
<acun:dropdown.trigger>
<acun:button variant="white">Sipariş işlemleri <acun:icon name="chevron-down" size="4" /></acun:button>
</acun:dropdown.trigger>
<acun:dropdown.content class="w-60">
<acun:dropdown.heading>Sipariş #10482</acun:dropdown.heading>
<acun:dropdown.item icon="pencil-square">Düzenle</acun:dropdown.item>
<acun:dropdown.item icon="user-plus">Temsilci ata</acun:dropdown.item>
<acun:dropdown.item icon="arrow-down-tray" href="#">Faturayı indir</acun:dropdown.item>
<acun:dropdown.separator />
<acun:dropdown.item icon="trash" danger>Siparişi sil</acun:dropdown.item>
</acun:dropdown.content>
</acun:dropdown>| Prop | Değerler |
|---|---|
acun:dropdown.trigger | Menüyü açan öğe |
acun:dropdown.content | Menü kutusu |
acun:dropdown.item | href, external, icon, danger |
heading · separator | Grup başlığı ve ayraç |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
align | end | start · end |
position | bottom | bottom · top |
full-width | false | Tetikleyici ve menü kapsayıcı genişliğinde |
dropdown.item: href | null | Verilirse a, yoksa button (type="button") |
dropdown.item: external | false | href ile birlikte: target="_blank" rel="noopener", sağda ok ikonu ve "(yeni sekmede açılır)" ekran okuyucu notu; href yoksa etkisiz |
dropdown.item: icon · danger | null · false | Öğenin solunda ikon; danger kırmızı (silme gibi) işlem |
dropdown.trigger · dropdown.content | — | Parçalı kullanım: tetikleyici ve menü kutusu |
dropdown.heading · dropdown.separator | — | Grup başlığı ve ayraç çizgisi |