Tanım listesi
Bir kaydın bilgilerini etiket ve değer çiftleri halinde alt alta listeler. Sipariş, lisans ya da müşteri ayrıntıları gibi salt okunur özetler için uygundur.
Temel kullanım
En kısa yol :items ile [etiket => değer] dizisi vermektir. Değerler kaçışlanarak yazılır, yani HTML olarak yorumlanmaz. Geniş ekranda etiket solda, değer sağda durur; dar ekranda etiket değerin üstüne geçer.
<acun:description-list :items="[
'Müşteri adı' => 'Ayşe Yılmaz',
'Müşteri no' => 'MÜŞ-10482',
'Üyelik' => 'Premium',
'Sipariş sayısı' => '5',
'Adres' => 'Moda Cad. No: 14, Kadıköy / İstanbul',
]" />| Prop | Değerler |
|---|---|
items | ['Etiket' => 'Değer', …] |
Zengin değerler
Değerde rozet, bağlantı ya da birden fazla satır gerekiyorsa listeyi acun:description-list.item satırlarıyla kurun. Etiket label ile verilir, değer slot'a yazılır.
<acun:description-list>
<acun:description-list.item label="Durum">
<acun:badge variant="success">Teslim edildi</acun:badge>
</acun:description-list.item>
<acun:description-list.item label="Teslim tarihi">
12 Eylül 2026, 09:42 · <a href="#" class="font-medium text-brand-600 hover:underline dark:text-brand-400">Kargoyu takip et</a>
</acun:description-list.item>
<acun:description-list.item label="Notlar">
<p>Paket kapıcıya bırakıldı; zil çalışmıyor.</p>
<p class="mt-1 text-gray-500 dark:text-zinc-400">Mehmet Kaya · 3 Eylül 2026</p>
</acun:description-list.item>
</acun:description-list>| Prop | Değerler |
|---|---|
label | Satırın etiketi |
Dizi ve satırları birlikte
:items ile slot birlikte kullanılabilir: önce dizideki düz değerler, ardından slot'taki satırlar gelir. Basit alanları diziyle, özel görünenleri acun:description-list.item ile yazın.
<acun:description-list :items="['Lisans no' => 'AC-2026-0412', 'Firma' => 'Acme Yazılım', 'Bitiş tarihi' => '31 Aralık 2026']">
<acun:description-list.item label="Durum">
<acun:badge variant="warning">Yenileme bekliyor</acun:badge>
</acun:description-list.item>
</acun:description-list>Kart içinde
Ayrıntı sayfalarında listeyi başlıklı bir acun:card içine koyun. class hem listeye hem satırlara eklenebilir; örnekteki -my-3, ilk ve son satırın boşluğunu kartın iç boşluğuyla dengeler.
<acun:card title="Müşteri bilgileri" subtitle="Son güncelleme: 3 Eylül 2026">
<acun:description-list class="-my-3" :items="[
'Müşteri adı' => 'Ayşe Yılmaz',
'Telefon' => '0 (216) 000 00 00',
'Üyelik' => 'Premium',
]" />
<acun:slot:footer>
<acun:button size="sm" variant="ghost">Düzenle</acun:button>
</acun:slot:footer>
</acun:card>| Prop | Değerler |
|---|---|
class | Listeye ya da satıra eklenir |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
items | [] | etiket => değer; değerler kaçışlanır |
description-list.item: label | — | Zorunlu; satırın etiketi |