List Group

Status

Active

Last Activity

2 months ago

Usage

<x-list-group>
    <x-list-group.item>
        The Evil Rabbit Jumped over the Fence.
    </x-list-group.item>
</x-list-group>

Style

Control the list group style by setting the style attribute.

Kevin Dierkx

kevin@example.com

Owner

Isabella Duffey

isabella@example.com

Financial

James Black

james@example.com

Technical

<x-list-group style="pills">
    <x-list-group.item>
        <div class="flex items-center gap-3">
            <x-avatar icon="fasl-face-monocle" />
            <div class="flex-grow">
                <x-heading size="sm" :heading-level="4">Kevin Dierkx</x-heading>
                <x-paragraph size="sm" style="muted">
                    kevin@example.com
                </x-paragraph>
            </div>
            <x-badge style="secondary">Owner</x-badge>
        </div>
    </x-list-group.item>

    <x-list-group.item>
        <div class="flex items-center gap-3">
            <x-avatar icon="fasl-face-smile-wink" />
            <div class="flex-grow">
                <x-heading size="sm" :heading-level="4">Isabella Duffey</x-heading>
                <x-paragraph size="sm" style="muted">
                    isabella@example.com
                </x-paragraph>
            </div>
            <x-badge style="secondary">Financial</x-badge>
        </div>
    </x-list-group.item>

    <x-list-group.item>
        <div class="flex items-center gap-3">
            <x-avatar icon="fasl-face-sunglasses" />
            <div class="flex-grow">
                <x-heading size="sm" :heading-level="4">James Black</x-heading>
                <x-paragraph size="sm" style="muted">
                    james@example.com
                </x-paragraph>
            </div>
            <x-badge style="secondary">Technical</x-badge>
        </div>
    </x-list-group.item>
</x-list-group>

Item Title

The x-list-group.item component has a dedicated x-slot:title slot for adding additional information about an entry. Alternatively, the same can be achieved by setting the title attribute.

Address

DDFSN

Hoogstraat 12

4331 KR, Middelburg

The Netherlands

VAT ID

NL000099998B57

Your next invoice will include 21% VAT based on your location.

<x-list-group>
    <x-list-group.item title="Address">
        <address class="not-italic">
            <x-heading :heading-level="4" size="sm">DDFSN</x-heading>
            <x-paragraph size="sm" style="muted">Hoogstraat 12</x-paragraph>
            <x-paragraph size="sm" style="muted">4331 KR, Middelburg</x-paragraph>
            <x-paragraph size="sm" style="muted">The Netherlands</x-paragraph>
        </address>
    </x-list-group.item>

    <x-list-group.item title="VAT ID">
        <span class="font-mono">NL000099998B57</span>
    </x-list-group.item>

    <x-list-group.item>
        <x-paragraph size="sm" style="muted">Your next invoice will include 21% VAT based on your location.</x-paragraph>
    </x-list-group.item>
</x-list-group>

Links

Use list group items as links by adding an href attribute. Optionally, as with native anchor elements, a target attribute can be set to control the behavior of the anchor.

Distorted Fusion

https://distortedfusion.com

DevNomads

https://devnomads.nl

<x-list-group>
    <x-list-group.item href="https://distortedfusion.com" target="_blank" title="Distorted Fusion">
        https://distortedfusion.com
    </x-list-group.item>

    <x-list-group.item href="https://devnomads.nl" target="_blank" title="DevNomads">
        https://devnomads.nl
    </x-list-group.item>
</x-list-group>

Buttons

List group items can be used as a <button> by adding the button attribute.

BENNY BENASSI - Satisfaction

Radio Edit

BENNY BENASSI - Satisfaction

Remix

<x-list-group>
    <x-list-group.item button onclick="alert('Hello World!')">
        <span>BENNY BENASSI - Satisfaction</span> <x-badge size="sm" style="success">Radio Edit</x-badge>
    </x-list-group.item>

    <x-list-group.item-btn onclick="alert('Hello World!')">
        <span>BENNY BENASSI - Satisfaction</span> <x-badge size="sm" style="warning">Remix</x-badge>
    </x-list-group.item>
</x-list-group>

Default Icons

The list group component uses the blade-ui-kit/blade-heroicons icon set by default.

You can customize the default icons globally through the BladeComponents service or via the component directly from a service provider's boot() method, or middleware.

<?php

use DistortedFusion\BladeComponents\BladeComponents;
use DistortedFusion\BladeComponents\Components\ListGroup\Item;

BladeComponents::defaultListGroupItemIndicatorIcon();
BladeComponents::setDefaultListGroupItemIndicatorIcon(icon: 'heroicon-o-chevron-right');

Item::defaultIndicatorIcon();
Item::setDefaultIndicatorIcon(icon: 'heroicon-o-chevron-right');

Component API

x-list-group

Attribute	Default	Description
`style`	`default`	`string` Possible values `default`, or `pills`.

x-list-group.item

Attribute	Default	Description
`button`	`false`	`bool` Renders the element as a `button`.
`href`	`null`	`string` When set, makes the element linkable.