List Item

By default, this will look up for:

$object->name as the main value.
$object->avatar as the picture url.

Electa

Kacie

Julian

@php
    $users = App\Models\User::take(3)->get();
@endphp
 
@foreach($users as $user)
    <x-list-item :item="$user" link="/docs/installation" />
@endforeach

Slots and other attributes

You can override all slots. It also supports nested properties.

Kallie

East Dinaland

top user

Custom value

Custom sub-value

@php
    $user1 = App\Models\User::inRandomOrder()->first();
    $user2 = App\Models\User::inRandomOrder()->first();
@endphp
 
{{-- Notice `city.name`. It supports nested properties --}}
<x-list-item :item="$user1" value="other_name" sub-value="city.name" avatar="other_avatar" />
 
{{-- All slots --}}
<x-list-item :item="$user2" no-separator no-hover>
    <x-slot:avatar>
        <x-badge value="top user" class="badge-primary" />
    </x-slot:avatar>
    <x-slot:value>
        Custom value
    </x-slot:value>
    <x-slot:sub-value>
        Custom sub-value
    </x-slot:sub-value>
    <x-slot:actions>
        <x-button icon="o-trash" class="text-red-500" wire:click="delete(1)" spinner />
    </x-slot:actions>
</x-list-item>

maryUI

Sponsor