Sekmeler
İçeriği sekmelere bölerek aynı alanda gösterir. Alt çizgili ve dolgulu iki görünümü vardır; sekme değişimi sayfayı yenilemez.
Temel kullanım
Sekmeler tabs dizisinden üretilir: anahtar sekmenin değeri, değer başlığıdır. Her acun:tab-panel'in value'su bir anahtarla eşleşmelidir. Varsayılan görünüm alt çizgilidir; sekmeler role="tab", paneller role="tabpanel" taşır.
<acun:tabs :tabs="['genel' => 'Genel', 'siparis' => 'Siparişler', 'gecmis' => 'Geçmiş']">
<acun:tab-panel value="genel"><p class="text-sm text-gray-600 dark:text-zinc-400">Premium üye · Kadıköy, İstanbul</p></acun:tab-panel>
<acun:tab-panel value="siparis"><p class="text-sm text-gray-600 dark:text-zinc-400">Son sipariş: 12 Eylül 2026</p></acun:tab-panel>
<acun:tab-panel value="gecmis"><p class="text-sm text-gray-600 dark:text-zinc-400">2026'da 9 sipariş, 1 iade.</p></acun:tab-panel>
</acun:tabs>| Prop | Değerler |
|---|---|
tabs | ['anahtar' => 'Başlık', …] |
value (tab-panel) | Eşleşen sekme anahtarı |
Dolgulu
variant="pills" seçili sekmeyi dolgulu gösterir; sekmeler sığmazsa alt satıra geçer. Filtre ya da görünüm seçimi gibi hafif geçişlerde uygundur.
<acun:tabs variant="pills" :tabs="['hepsi' => 'Tümü', 'bekleyen' => 'Bekleyen', 'teslim' => 'Teslim edildi']">
<acun:tab-panel value="hepsi"><p class="text-sm text-gray-600 dark:text-zinc-400">148 sipariş</p></acun:tab-panel>
<acun:tab-panel value="bekleyen"><p class="text-sm text-gray-600 dark:text-zinc-400">36 sipariş kargoya verilmeyi bekliyor.</p></acun:tab-panel>
<acun:tab-panel value="teslim"><p class="text-sm text-gray-600 dark:text-zinc-400">112 sipariş teslim edildi.</p></acun:tab-panel>
</acun:tabs>| Prop | Değerler |
|---|---|
variant | underline | pills |
Başlangıç sekmesi
active açılışta seçili sekmeyi belirler; verilmezse ilk anahtar seçilir. Anahtarlar sayı da olabilir (ör. yıllar); active ve value metin olarak karşılaştırıldığı için :active="2025" ile value="2025" eşleşir. Sekme değişimi yalnızca tarayıcıda olur, sunucuya istek gitmez.
<acun:tabs :active="2025" :tabs="[2026 => '2026', 2025 => '2025', 2024 => '2024']">
<acun:tab-panel value="2026"><p class="text-sm text-gray-600 dark:text-zinc-400">2026: 9 sipariş</p></acun:tab-panel>
<acun:tab-panel value="2025"><p class="text-sm text-gray-600 dark:text-zinc-400">2025: 12 sipariş, 1 iade</p></acun:tab-panel>
<acun:tab-panel value="2024"><p class="text-sm text-gray-600 dark:text-zinc-400">2024: 11 sipariş</p></acun:tab-panel>
</acun:tabs>| Prop | Değerler |
|---|---|
active | Sekme anahtarı |
Kart içinde
Kayıt ayrıntılarını kart içinde sekmelere bölerek uzun sayfaları kısaltın. acun:tabs'a verilen class ve diğer öznitelikler kök öğeye, acun:tab-panel'e verilenler panele eklenir. İçeriği olmayan sekmelerde acun:empty-state gösterin.
<acun:card title="Müşteri kartı" subtitle="Ayşe Yılmaz · #04112">
<acun:tabs variant="pills" :tabs="['genel' => 'Genel', 'siparis' => 'Siparişler', 'fatura' => 'Faturalar']">
<acun:tab-panel value="genel"><p class="text-sm text-gray-600 dark:text-zinc-400">Premium üye · Kadıköy, İstanbul</p></acun:tab-panel>
<acun:tab-panel value="siparis"><p class="text-sm text-gray-600 dark:text-zinc-400">Son sipariş: 12 Eylül 2026</p></acun:tab-panel>
<acun:tab-panel value="fatura" class="py-2"><acun:empty-state title="Fatura yok" /></acun:tab-panel>
</acun:tabs>
</acun:card>Parçalı kullanım
Sekmeleri acun:tabs.list içinde acun:tabs.trigger (value, badge, icon, disabled) ile, içerikleri acun:tabs.panel ile yazın. wire:model açık sekmeyi Livewire özelliğine iki yönlü bağlar (özelliği bir değerle başlatın); verilmezse ilk sekme açılır. Sekmeler arasında sol/sağ ok, Home ve End tuşlarıyla geçilir. size sm · md · lg.
<acun:tabs wire:model="activeTab" variant="underline" size="md">
<acun:tabs.list aria-label="Mağaza özeti">
<acun:tabs.trigger value="overview">Genel Bakış</acun:tabs.trigger>
<acun:tabs.trigger value="orders" badge="8">Siparişler</acun:tabs.trigger>
<acun:tabs.trigger value="settings">Ayarlar</acun:tabs.trigger>
</acun:tabs.list>
<acun:tabs.panel value="overview">
<div class="grid gap-4 sm:grid-cols-3">
<acun:stat-card label="Sipariş" value="142" icon="shopping-bag" />
<acun:stat-card label="Teslim edilen" value="118" icon="check-circle" color="success" />
<acun:stat-card label="Bekleyen" value="24" icon="clock" color="warning" />
</div>
</acun:tabs.panel>
<acun:tabs.panel value="orders">
<ul class="divide-y divide-gray-100 text-sm dark:divide-zinc-800">
<li class="flex items-center justify-between py-2.5">
<span class="text-gray-900 dark:text-zinc-100">Cumhuriyet Mah. 12. Sok. No: 4</span>
<acun:badge variant="success">Teslim edildi</acun:badge>
</li>
<li class="flex items-center justify-between py-2.5">
<span class="text-gray-900 dark:text-zinc-100">Atatürk Cad. No: 87 D: 3</span>
<acun:badge variant="warning">Yolda</acun:badge>
</li>
</ul>
</acun:tabs.panel>
<acun:tabs.panel value="settings">
<p class="text-sm text-gray-600 dark:text-zinc-400">Mağaza sorumlusu Mehmet Kaya. Kargo kesim saati 15:00; daha sonra gelen siparişler ertesi iş günü kargoya verilir.</p>
</acun:tabs.panel>
</acun:tabs>| Prop | Değerler |
|---|---|
wire:model | Açık sekmenin bağlandığı Livewire özelliği |
size | sm · md · lg |
acun:tabs.trigger | value, badge, icon, disabled |
acun:tabs.panel | value |
İkonlu hap sekmeler
variant="pills" dolgulu sekmeler çizer ve dar ekranda alt satıra sarar; disabled sekme seçilemez ve klavyeyle atlanır.
<acun:tabs variant="pills" active="ekip">
<acun:tabs.list aria-label="Destek görünümü">
<acun:tabs.trigger value="talepler" icon="inbox">Talepler</acun:tabs.trigger>
<acun:tabs.trigger value="ekip" icon="users" badge="6">Ekip üyeleri</acun:tabs.trigger>
<acun:tabs.trigger value="rapor" icon="chart-bar">Rapor</acun:tabs.trigger>
<acun:tabs.trigger value="arsiv" icon="archive-box" disabled>Arşiv</acun:tabs.trigger>
</acun:tabs.list>
<acun:tabs.panel value="talepler">
<p class="text-sm text-gray-600 dark:text-zinc-400">Bugün 142 talep açıldı; 4'ü acil olarak işaretlendi.</p>
</acun:tabs.panel>
<acun:tabs.panel value="ekip">
<p class="text-sm text-gray-600 dark:text-zinc-400">6 ekip üyesi çevrimiçi: 5'i talep yanıtlıyor, 1'i molada.</p>
</acun:tabs.panel>
<acun:tabs.panel value="rapor">
<p class="text-sm text-gray-600 dark:text-zinc-400">Eylül 2026: 3.106 talep, %94'ü ilk yanıtta çözüldü.</p>
</acun:tabs.panel>
<acun:tabs.panel value="arsiv">Arşiv</acun:tabs.panel>
</acun:tabs>Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
tabs | [] | anahtar => başlık; anahtar metin ya da sayı |
active | ilk anahtar | Açılışta seçili sekme (metin olarak karşılaştırılır) |
variant | underline | underline · pills |
tab-panel: value | — | Zorunlu; eşleşen sekme anahtarı |
size | md | sm · md · lg |
wire:model · x-model | — | Açık sekmeyi bir özelliğe iki yönlü bağlar |
tabs.trigger: value · badge · icon · disabled | — | value zorunlu; badge sayı ya da kısa metin, icon bir ikon adı |
tabs.panel: value | — | Zorunlu; eşleşen tabs.trigger değeri |