List group

29 · UI öğeleri

Kenarlıklı, satırları çizgiyle ayrılmış liste. Satırlar düz metin, bağlantı, aktif ya da pasif olabilir; ikon ve rozetle zenginleştirilebilir.

acun:list-group

Temel kullanım

acun:list-group bir liste, her acun:list-group.item bir satırdır. Bağlantı verilmeyen satırlar düz metin olarak gösterilir.

CANLI ÖRNEK

<acun:list-group>
    <acun:list-group.item>İstanbul Merkez Depo</acun:list-group.item>
    <acun:list-group.item>Ankara Depo</acun:list-group.item>
    <acun:list-group.item>İzmir Depo</acun:list-group.item>
</acun:list-group>

Bağlantılar ve durumlar

href satırı bağlantıya çevirir. active seçili satırı vurgular ve bağlantıya aria-current ekler; disabled satırı soluklaştırır ve href verilse bile bağlantı üretmez.

CANLI ÖRNEK

<acun:list-group>
    <acun:list-group.item href="#" active>İstanbul Merkez Depo</acun:list-group.item>
    <acun:list-group.item href="#">Ankara Depo</acun:list-group.item>
    <acun:list-group.item href="#">İzmir Depo</acun:list-group.item>
    <acun:list-group.item href="#" disabled>Bursa Depo (pasif)</acun:list-group.item>
</acun:list-group>

Prop	Değerler
`href`	Bağlantı adresi
`active`	true \| false
`disabled`	true \| false

İkon ve rozet

Satır içeriği yatay dizilir ve aralarında boşluk bırakılır. İkonu başa koyun, rozeti ms-auto sınıfıyla satırın sonuna itin.

CANLI ÖRNEK

<acun:list-group>
    <acun:list-group.item href="#" active><acun:icon name="building-storefront" size="4" /> İstanbul Merkez Depo <acun:badge class="ms-auto">312</acun:badge></acun:list-group.item>
    <acun:list-group.item href="#"><acun:icon name="building-storefront" size="4" /> Ankara Depo <acun:badge class="ms-auto">148</acun:badge></acun:list-group.item>
    <acun:list-group.item href="#"><acun:icon name="building-storefront" size="4" /> İzmir Depo <acun:badge class="ms-auto">205</acun:badge></acun:list-group.item>
    <acun:list-group.item disabled><acun:icon name="building-storefront" size="4" /> Bursa Depo (pasif)</acun:list-group.item>
</acun:list-group>

Kenarlıksız

flush dış kenarlığı ve arka planı kaldırır; liste bulunduğu kabın kenarlarına dayanır. Kart içinde :padding="false" ile birlikte kullanın.

CANLI ÖRNEK

<acun:card title="Bekleyen siparişler" :padding="false">
    <acun:list-group flush>
        <acun:list-group.item>Ayşe Yılmaz <acun:badge variant="warning" class="ms-auto">Ödeme bekliyor</acun:badge></acun:list-group.item>
        <acun:list-group.item>Mehmet Kaya <acun:badge variant="warning" class="ms-auto">Ödeme bekliyor</acun:badge></acun:list-group.item>
        <acun:list-group.item>Zeynep Arslan <acun:badge class="ms-auto">Hazırlanıyor</acun:badge></acun:list-group.item>
    </acun:list-group>
</acun:card>

Prop	Değerler
`flush`	true \| false

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`flush`	`false`	Dış kenarlık ve arka plan olmadan
`list-group.item: href`	`null`	Satırı bağlantı yapar
`list-group.item: active`	`false`	Seçili satır; bağlantıya aria-current eklenir
`list-group.item: disabled`	`false`	Soluk satır; bağlantı üretilmez