new
The real time chat demo: Ping →

List Item

By default, this will look up for:

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

@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.


Neha
Jillianchester

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