Kart ve sekmeler

19 · Kartlar

Kart ve sekmeler

Bir kaydın farklı yönlerini tek kartta sekmelerle göstermek için iki bileşenin birlikte kullanımı. Her bileşenin tüm seçenekleri kendi sayfasında (Temel kart, Sekmeler) anlatılır.

PRO acun:card · acun:tabs

Sekmeli kart

acun:tabs bileşenini kartın gövdesine koyun. Sekmeler tabs dizisinden (anahtar => başlık) çizilir, her acun:tab-panel aynı anahtarı value olarak alır. Geçiş tarayıcıda yapılır, sunucuya istek gitmez.

CANLI ÖRNEK

<acun:card title="Müşteri özeti">
    <acun:slot:actions><acun:button variant="ghost" size="sm">Düzenle</acun:button></acun:slot:actions>

    <acun:tabs :tabs="['bilgi' => 'Bilgi', 'siparis' => 'Siparişler', 'belge' => 'Belgeler']">
        <acun:tab-panel value="bilgi"><p class="text-sm text-gray-600 dark:text-zinc-400">Premium üye · İstanbul</p></acun:tab-panel>
        <acun:tab-panel value="siparis"><acun:progress :value="75" label="Yıllık hedef" /></acun:tab-panel>
        <acun:tab-panel value="belge"><acun:empty-state title="Belge yok" /></acun:tab-panel>
    </acun:tabs>
</acun:card>

Prop	Değerler
`tabs`	anahtar => başlık dizisi
`tab-panel value`	Sekmenin anahtarı

Başlangıç sekmesi ve dolgulu görünüm

Sayfa açıldığında ilk sekme seçilidir; başka bir sekmeyle başlamak için active ile anahtarını verin. variant="pills" sekmeleri dolgulu düğmeler olarak çizer.

CANLI ÖRNEK

<acun:card title="Kadıköy mağazası" subtitle="KDK-04 · 148 sipariş">
    <acun:tabs variant="pills" active="siparis" :tabs="['genel' => 'Genel', 'siparis' => 'Siparişler', 'ekip' => 'Ekip']">
        <acun:tab-panel value="genel"><p class="text-sm text-gray-600 dark:text-zinc-400">Mağaza · 14 çalışan</p></acun:tab-panel>
        <acun:tab-panel value="siparis"><p class="text-sm text-gray-600 dark:text-zinc-400">Bu ay 112 sipariş kargolandı, 36 sipariş bekliyor.</p></acun:tab-panel>
        <acun:tab-panel value="ekip"><p class="text-sm text-gray-600 dark:text-zinc-400">Ayşe Yılmaz, Mehmet Kaya</p></acun:tab-panel>
    </acun:tabs>
</acun:card>

Prop	Değerler
`active`	Başlangıç sekmesinin anahtarı
`variant`	underline \| pills

Alt çubuklu

Kartın footer slot'u sekmelerin altında sabit kalır; tüm sekmeler için geçerli işlemleri buraya koyun.

CANLI ÖRNEK

<acun:card title="Rapor">
    <acun:tabs :tabs="['hafta' => 'Bu hafta', 'ay' => 'Bu ay']">
        <acun:tab-panel value="hafta"><p class="text-sm tabular-nums">214 sipariş · %92 memnuniyet</p></acun:tab-panel>
        <acun:tab-panel value="ay"><p class="text-sm tabular-nums">1.248 sipariş · %89 memnuniyet</p></acun:tab-panel>
    </acun:tabs>
    <acun:slot:footer>
        <acun:button size="sm" variant="white">Excel'e aktar</acun:button>
    </acun:slot:footer>
</acun:card>

Prop	Değerler
`footer`	Slot: kartın alt çubuğu

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`card: title, subtitle`	`null`	Başlık ve altındaki küçük metin
`card: collapsible, closable`	`false`	Daraltma ve kapatma düğmeleri
`card: padding`	`true`	false: içerik kenara dayanır
`tabs: tabs`	`[]`	anahtar => başlık
`tabs: active`	`ilk anahtar`	Başlangıç sekmesi
`tabs: variant`	`underline`	underline · pills
`tab-panel: value`	—	Zorunlu. Sekmenin anahtarı

Slot'lar: card: actions, footer, varsayılan içerik · tabs: acun:tab-panel öğeleri.