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