new
Livewire Volt extension for VSCode. Voltage →

Avatar

glover.shawn
glover.shawn
Electa
RT
Robson Tenório
@robsontenorio
@php
$user = App\Models\User::first();
@endphp
 
<x-avatar :image="$user->avatar" />
 
{{-- Manipulate avatar imagem with CSS classes --}}
<x-avatar :image="$user->avatar" class="!w-14 !rounded-lg" />
 
{{-- Title --}}
<x-avatar :image="$user->avatar" :title="$user->username" />
 
{{-- Subtitle --}}
<x-avatar :image="$user->avatar" :title="$user->username" :subtitle="$user->name" class="!w-10" />
 
{{-- Placeholder --}}
<x-avatar placeholder="RT" title="Robson Tenório" subtitle="@robsontenorio" class="!w-10" />

Slots

glover.shawn
12 posts
45 comments
@php
$user = App\Models\User::first();
@endphp
 
<x-avatar :image="$user->avatar" class="!w-24">
 
<x-slot:title class="text-3xl pl-2">
{{ $user->username }}
</x-slot:title>
 
<x-slot:subtitle class="text-gray-500 flex flex-col gap-1 mt-2 pl-2">
<x-icon name="o-paper-airplane" label="12 posts" />
<x-icon name="o-chat-bubble-left" label="45 comments" />
</x-slot:subtitle>
 
</x-avatar>

API

Prop Description Type Default Required
image The URL of the avatar image. string '' false
placeholder The placeholder of the avatar. string '' false
title The title text displayed beside the avatar. string NULL false
subtitle The subtitle text displayed beside the avatar. string NULL false
Slot Description
title The title text displayed beside the avatar.
subtitle The subtitle text displayed beside the avatar.

maryUI
Sponsor