Collapse

26 · UI öğeleri

Bir bağlantıya tıklanınca altındaki alanı açıp kapatır. Ayrıntıları, ek seçenekleri ya da uzun açıklamaları ilk bakışta gizlemek için kullanılır.

acun:collapse

Temel kullanım

label tetikleyici bağlantının metnidir, gizlenecek içerik slot'a yazılır. Alan açılınca bağlantının yanındaki ok ters döner ve durum aria-expanded ile bildirilir.

CANLI ÖRNEK

<acun:collapse label="Aktarım ayrıntıları">
    <p class="text-sm text-gray-600 dark:text-zinc-400">1.248 satır okundu: 1.201 ürün eklendi, 39 ürün güncellendi, 8 satır geçersiz barkod nedeniyle atlandı.</p>
</acun:collapse>

Prop	Değerler
`label`	Tetikleyici metni

Açık başlangıç

open ile alan açık gelir. Kullanıcının hemen görmesi gereken ama isterse gizleyebileceği ayrıntılar için kullanın.

CANLI ÖRNEK

<acun:collapse label="Atlanan satırlar (3)" open>
    <ul class="space-y-1 text-sm text-gray-600 dark:text-zinc-400">
        <li>Satır 14 · Barkod 12 haneli</li>
        <li>Satır 87 · Kategori kodu bulunamadı</li>
        <li>Satır 203 · Aynı stok kodu iki kez yazılmış</li>
    </ul>
</acun:collapse>

Prop	Değerler
`open`	true \| false

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`label`	—	Zorunlu; tetikleyici bağlantının metni
`open`	`false`	Başlangıçta açık

Slot'lar: varsayılan içerik (açılıp kapanan alan)