Github
  1. Blade Components
  5. List Group

List Group

List information in an organized manner or refer to a different source.

Status

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

Isabella Duffey

isabella@example.com

James Black

james@example.com 

<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
Go to

DevNomads

https://devnomads.nl
Go to 
<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
BENNY BENASSI - Satisfaction 
<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.

On This Page