ListItem

Renders an object as a pretty row. Perfect for lists.

Property	Type	Description
item	object\|array	The object or array that holds the data.
id	?string	A unique identifier.
avatar	?string	The key to use for loading the avatar.
fallback-avatar	?string	The avatar to load in case the regular one failed to load.
title	?string	The key to use for loading the title.
subtitle	?string	The key to use for loading the subtitle.
no-separator	bool	If the separator should be hidden. [default=false]
no-hover	bool	If the hover style should be hidden. [default=false]
link	?string	The link applied to the whole row.

Content

By default, the component will load the following keys:

$object->name as the title.
$object->avatar as the picture url.

@foreach ($this->users as $user)
    <c-list-item :item="$user" subtitle="username" link="/docs/install" />
@endforeach

Accessors

You can overwrite the accessor keys for each section.

Rea

London

{{-- NOTE: `address.city` ⇒ It supports nested properties --}}
<c-list-item :item="$this->users[0]" title="short_name" subtitle="address.city" avatar="alt_avatar" />

No Separator & No Hover

Rea Feichtinger

Jon Doe

Marsha P. Johnson

@foreach ($this->users as $user)
    <c-list-item :item="$user" no-separator no-hover />
@endforeach

Fully custom content

top user

Custom title

Custom subtitle

<c-list-item :item="$this->users[0]">
    <c-slot:avatar>
        <c-badge label="top user" class="badge-primary badge-soft" />
    </c-slot:avatar>
    <c-slot:title>
        Custom title
    </c-slot:title>
    <c-slot:subtitle>
        Custom subtitle
    </c-slot:subtitle>
    <c-slot:actions>
        <c-button icon="trash" class="btn-sm" wire:click="sleep(1)" spinner />
    </c-slot:actions>
</c-list-item>