List Item

By default, this will look up for:

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

Hannah

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

Alternative attributes

Julio

North Judytown

@php     
    $user1 = 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" />

No separator & no hover

Hannah

Ayana

Osborne

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

Slots

top user

Custom value

Custom sub-value

@php     
    $user1 = App\Models\User::inRandomOrder()->first();
@endphp
<x-list-item :item="$user1">
    <x-slot:avatar>
        <x-badge value="top user" class="badge-primary badge-soft" />
    </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="btn-sm" wire:click="delete(1)" spinner />
    </x-slot:actions>
</x-list-item>

Made with by Robson Tenório and contributors.