List group

29 · UI elements

A bordered list with rows separated by lines. Rows can be plain text, links, active or disabled, and can be enriched with icons and badges.

acun:list-group

Basic usage

acun:list-group is a list and each acun:list-group.item is a row. Rows without a link are shown as plain text.

LIVE EXAMPLE

<acun:list-group>
    <acun:list-group.item>Istanbul Main Warehouse</acun:list-group.item>
    <acun:list-group.item>Ankara Warehouse</acun:list-group.item>
    <acun:list-group.item>Izmir Warehouse</acun:list-group.item>
</acun:list-group>

Links and states

href turns the row into a link. active highlights the selected row and adds aria-current to the link; disabled fades the row and produces no link even when href is given.

LIVE EXAMPLE

<acun:list-group>
    <acun:list-group.item href="#" active>Istanbul Main Warehouse</acun:list-group.item>
    <acun:list-group.item href="#">Ankara Warehouse</acun:list-group.item>
    <acun:list-group.item href="#">Izmir Warehouse</acun:list-group.item>
    <acun:list-group.item href="#" disabled>Bursa Warehouse (inactive)</acun:list-group.item>
</acun:list-group>

Prop	Values
`href`	Link address
`active`	true \| false
`disabled`	true \| false

Icon and badge

Row content is laid out horizontally with spacing in between. Put the icon first and push the badge to the end of the row with the ms-auto class.

LIVE EXAMPLE

<acun:list-group>
    <acun:list-group.item href="#" active><acun:icon name="building-storefront" size="4" /> Istanbul Main Warehouse <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 Warehouse <acun:badge class="ms-auto">148</acun:badge></acun:list-group.item>
    <acun:list-group.item href="#"><acun:icon name="building-storefront" size="4" /> Izmir Warehouse <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 Warehouse (inactive)</acun:list-group.item>
</acun:list-group>

Flush

flush removes the outer border and the background; the list reaches the edges of its container. Use it inside a card together with :padding="false".

LIVE EXAMPLE

<acun:card title="Pending orders" :padding="false">
    <acun:list-group flush>
        <acun:list-group.item>Ayşe Yılmaz <acun:badge variant="warning" class="ms-auto">Awaiting payment</acun:badge></acun:list-group.item>
        <acun:list-group.item>Mehmet Kaya <acun:badge variant="warning" class="ms-auto">Awaiting payment</acun:badge></acun:list-group.item>
        <acun:list-group.item>Zeynep Arslan <acun:badge class="ms-auto">Preparing</acun:badge></acun:list-group.item>
    </acun:list-group>
</acun:card>

Prop	Values
`flush`	true \| false

API

Props and slots

The values the component accepts.

Prop	Default	Description
`flush`	`false`	Without the outer border and background
`list-group.item: href`	`null`	Makes the row a link
`list-group.item: active`	`false`	Selected row; aria-current is added to the link
`list-group.item: disabled`	`false`	Faded row; no link is produced