Accordion
Başlığına tıklanınca açılıp kapanan bölümler. Sık sorulan sorular ve uzun içeriklerin gruplanması için uygundur; varsayılan olarak aynı anda tek bölüm açık kalır.
Temel kullanım
Her bölüm bir acun:accordion.item'dır: title başlığı, name bölümün adını verir. Başlangıçta açık bölümü open ile seçin; verilmezse hepsi kapalı gelir. Bir bölüm açılınca açık olan kapanır.
<acun:accordion open="kargo">
<acun:accordion.item name="kargo" title="Siparişim ne zaman kargoya verilir?">
Saat 15:00'e kadar verilen siparişler aynı gün kargoya verilir; takip numarası e-postayla gönderilir.
</acun:accordion.item>
<acun:accordion.item name="iade" title="Ürünü nasıl iade ederim?">
Hesabım > Siparişlerim sayfasından iade talebi oluşturun; iade kargo kodu 14 gün geçerlidir.
</acun:accordion.item>
<acun:accordion.item name="aktarim" title="Excel'den ürün aktarılabilir mi?">
Evet, Aktarımlar menüsünden şablonu indirip doldurduktan sonra yükleyebilirsiniz.
</acun:accordion.item>
</acun:accordion>| Prop | Değerler |
|---|---|
open | Bölüm adı |
name | Bölüm adı; sayfada benzersiz olmalı |
title | Başlık metni |
Birden fazla açık bölüm
multiple ile bölümler birbirinden bağımsız açılıp kapanır. Birden çok bölümü açık başlatmak için :open ile ad dizisi verin.
<acun:accordion multiple :open="['kisisel', 'adres']">
<acun:accordion.item name="kisisel" title="Kişisel bilgiler">
Ayşe Yılmaz · Premium üye · kayıt tarihi 3 Mart 2025
</acun:accordion.item>
<acun:accordion.item name="adres" title="Adres">
Caferağa Mah. Moda Cad. No: 14, Kadıköy / İstanbul
</acun:accordion.item>
<acun:accordion.item name="gecmis" title="Sipariş geçmişi">
Son sipariş 12 Eylül 2026; bu yıl 9 sipariş verildi.
</acun:accordion.item>
</acun:accordion>| Prop | Değerler |
|---|---|
multiple | true | false |
open | 'ad' | ['ad1', 'ad2'] |
Zengin içerik
Bölüm içeriği yalnızca metin olmak zorunda değildir; liste, düğme ya da form alanı koyabilirsiniz. acun:accordion.item'a verilen class içerik alanına eklenir.
<acun:accordion open="belgeler">
<acun:accordion.item name="belgeler" title="Kurumsal hesap için gerekli belgeler">
<ul class="list-disc space-y-1 ps-5">
<li>Vergi levhası</li>
<li>İmza sirküleri</li>
<li>Ticaret sicil gazetesi</li>
</ul>
<acun:button size="sm" variant="outline" class="mt-4">Belge yükle</acun:button>
</acun:accordion.item>
<acun:accordion.item name="sure" title="Onay ne kadar sürer?">
Kurumsal hesap talepleri en geç 2 iş günü içinde sonuçlanır.
</acun:accordion.item>
</acun:accordion>| Prop | Değerler |
|---|---|
class (accordion.item) | İçerik alanının sınıfları |
Başlık ve içerik parçaları
Başlıkta metinden fazlası (ikon, rozet, sayı) gerekiyorsa title vermeyin; bölümü acun:accordion.heading ve acun:accordion.content parçalarıyla yazın. Parçalar bölümün name değerini kendileri bulur; class gibi öznitelikler başlıkta düğmeye, içerikte içerik alanına eklenir.
<acun:accordion open="bekleyen">
<acun:accordion.item name="bekleyen">
<acun:accordion.heading>
<acun:icon name="clock" size="4" class="text-amber-500" />
Bekleyen talepler
<acun:badge variant="warning">12</acun:badge>
</acun:accordion.heading>
<acun:accordion.content>
Yanıt bekleyen 12 destek talebi var; en eskisi 3 gündür bekliyor.
</acun:accordion.content>
</acun:accordion.item>
<acun:accordion.item name="tamamlanan">
<acun:accordion.heading>
<acun:icon name="check-circle" size="4" class="text-emerald-500" />
Çözülen talepler
<acun:badge variant="success">48</acun:badge>
</acun:accordion.heading>
<acun:accordion.content>
Eylül ayında 48 talep çözüldü.
</acun:accordion.content>
</acun:accordion.item>
</acun:accordion>| Prop | Değerler |
|---|---|
acun:accordion.heading | Başlık; öznitelikler düğmeye eklenir |
acun:accordion.content | İçerik; öznitelikler içerik alanına eklenir |
Gösterge
Başlıklardaki açık/kapalı işaretini akordeon belirler: indicator chevron (varsayılan), plus (açılınca eksiye döner) ya da none; indicator-position="start" işareti metnin soluna alır. Bir başlık <acun:slot:indicator> ile kendi ikonunu kullanabilir; açık hâlini group-aria-expanded: ile biçimleyin.
<acun:accordion indicator="plus" indicator-position="start" open="ucret">
<acun:accordion.item name="ucret" title="Kargo ücreti var mı?">
500 ₺ ve üzeri siparişlerde kargo ücretsizdir; daha küçük siparişlerden 49,90 ₺ kargo ücreti alınır.
</acun:accordion.item>
<acun:accordion.item name="saat" title="Destek saatleri nedir?">
Destek ekibi hafta içi 09:00–18:00 arasında talepleri yanıtlar.
</acun:accordion.item>
</acun:accordion>
<acun:accordion>
<acun:accordion.item name="ozel">
<acun:accordion.heading>
Özel gösterge
<acun:slot:indicator><acun:icon name="chevron-double-down" size="4" class="transition-transform group-aria-expanded:rotate-180" /></acun:slot:indicator>
</acun:accordion.heading>
<acun:accordion.content>Kendi ikonunuz; açılınca döner.</acun:accordion.content>
</acun:accordion.item>
</acun:accordion>| Prop | Değerler |
|---|---|
indicator | chevron · plus · none |
indicator-position | end · start |
indicator (slot, accordion.heading) | Özel işaret |
Açılamayan bölüm
disabled verilen bölüm açılamaz; başlığı soluk görünür ve tıklanamaz. Henüz kullanılamayan adımlar ya da yetkisi olmayan bölümler için uygundur.
<acun:accordion open="hazirlandi">
<acun:accordion.item name="hazirlandi" title="Siparişler hazırlandı">486 sipariş paketlendi ve etiketlendi.</acun:accordion.item>
<acun:accordion.item name="kargolandi" title="Kargoya verildi">4 kargo firmasından 3'ü paketleri teslim aldı.</acun:accordion.item>
<acun:accordion.item name="rapor" title="Gün sonu raporu (18:00'de açılır)" disabled>Rapor gün sonunda hazırlanır.</acun:accordion.item>
</acun:accordion>Lazy içerik
acun:accordion.content lazy içeriği bölüm ilk açılana kadar sayfaya eklemez; açıldıktan sonra yerinde kalır. Grafik, harita, video ya da ağır bir Livewire bileşeni sayfa açılışını yavaşlatmaz. İçine kendi lazy özelliği olan bir Livewire bileşeni koyarsanız (<livewire:satis-istatistikleri lazy />) o bileşen de ancak bölüm açılınca yüklenir.
<acun:accordion>
<acun:accordion.item name="istatistik">
<acun:accordion.heading>
<acun:icon name="chart-bar" size="4" /> Haftalık sipariş grafiği
</acun:accordion.heading>
<acun:accordion.content lazy>
<acun:chart :height="200" :options="[
'chart' => ['type' => 'bar'],
'series' => [['name' => 'Sipariş', 'data' => [62, 71, 58, 80, 74, 96, 45]]],
'xaxis' => ['categories' => ['Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt', 'Paz']],
'dataLabels' => ['enabled' => false],
]" />
</acun:accordion.content>
</acun:accordion.item>
</acun:accordion>| Prop | Değerler |
|---|---|
lazy (accordion.content) | İçerik ilk açılışta çizilir |
Serbest tetikleyici
Başlığın hazır görünümü yerine düzeni tamamen size ait bir satır gerekiyorsa acun:accordion.trigger kullanın: biçimi ve işareti olmayan bir düğmedir, erişilebilirlik bağlantıları (aria-expanded, aria-controls) başlıkla aynıdır. Bağlantı ve başka düğmeleri tetikleyicinin içine değil yanına koyun; açık hâli group-aria-expanded: ile biçimleyin.
<acun:accordion>
@foreach ([['siparis-10482', 'Sipariş #10482 · Kadıköy', 'Ahmet Yılmaz', 3], ['siparis-10483', 'Sipariş #10483 · Üsküdar', 'Elif Kaya', 5]] as [$name, $order, $customer, $items])
<acun:accordion.item :name="$name">
<div class="flex items-center gap-3 px-5 py-3">
<acun:accordion.trigger class="flex min-w-0 flex-1 items-center gap-3 text-left">
<acun:icon name="chevron-right" size="4" class="flex-none text-gray-400 transition-transform group-aria-expanded:rotate-90" />
<acun:avatar :name="$customer" size="sm" />
<span class="min-w-0">
<span class="block truncate text-sm font-medium text-gray-900 dark:text-zinc-100">{{ $order }}</span>
<span class="block text-xs text-gray-500 dark:text-zinc-400">{{ $customer }} · {{ $items }} ürün</span>
</span>
</acun:accordion.trigger>
<acun:button size="sm" variant="white">Kargoyu izle</acun:button>
</div>
<acun:accordion.content>
Sipariş sabah 09:00'da kargoya verildi; teslim edilemezse ertesi iş günü yeniden denenir.
</acun:accordion.content>
</acun:accordion.item>
@endforeach
</acun:accordion>| Prop | Değerler |
|---|---|
acun:accordion.trigger | Biçimsiz tetikleyici; öznitelikler düğmeye |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
multiple | false | Aynı anda birden çok bölüm açık kalabilir |
open | null | Başlangıçta açık bölüm adı ya da ad dizisi |
accordion.item: name | — | Zorunlu; bölüm adı, kimlik (id) buradan üretilir |
accordion.item: title | null | Başlık metni; verilmezse bölüm heading ve content parçalarıyla yazılır |
indicator | chevron | Başlıklardaki işaret: chevron · plus · none |
indicator-position | end | İşaretin yeri: end · start |
accordion.item: disabled | false | Bölüm açılamaz; başlığı ve tetikleyicisi devre dışı |
accordion.content: lazy | false | İçerik bölüm ilk açılınca çizilir ve yerinde kalır |
accordion.trigger | — | Başlık yerine düzeni serbest, biçimsiz tetikleyici |