Avatar
Avatar component.
Avatar, Personalization Blocks
Example:
TallStackUi::personalize() ->avatar() ->block('block', 'classes');
<x-avatar text="TS" />
<x-avatar text="TS" /><x-avatar text="TS" color="secondary" /><x-avatar text="TS" color="slate" /><x-avatar text="TS" color="gray" /><x-avatar text="TS" color="zinc" /><x-avatar text="TS" color="neutral" /><x-avatar text="TS" color="stone" /><x-avatar text="TS" color="red" /><x-avatar text="TS" color="orange" /><x-avatar text="TS" color="amber" /><x-avatar text="TS" color="yellow" /><x-avatar text="TS" color="lime" /><x-avatar text="TS" color="green" /><x-avatar text="TS" color="emerald" /><x-avatar text="TS" color="teal" /><x-avatar text="TS" color="cyan" /><x-avatar text="TS" color="sky" /><x-avatar text="TS" color="blue" /><x-avatar text="TS" color="indigo" /><x-avatar text="TS" color="violet" /><x-avatar text="TS" color="purple" /><x-avatar text="TS" color="fuchsia" /><x-avatar text="TS" color="pink" /><x-avatar text="TS" color="rose" /><x-avatar text="TS" color="black" />
<x-avatar text="XS" xs /><x-avatar text="SM" sm /><x-avatar text="MD" md /><x-avatar text="LG" lg />
<x-avatar text="TS" square />
An option generate avatar with a svg placeholder.
<x-avatar /><x-avatar color="secondary" /><x-avatar color="slate" /><x-avatar color="gray" /><x-avatar color="zinc" /><x-avatar color="neutral" /><x-avatar color="stone" /><x-avatar color="red" /><x-avatar color="orange" /><x-avatar color="amber" /><x-avatar color="yellow" /><x-avatar color="lime" /><x-avatar color="green" /><x-avatar color="emerald" /><x-avatar color="teal" /><x-avatar color="cyan" /><x-avatar color="sky" /><x-avatar color="blue" /><x-avatar color="indigo" /><x-avatar color="violet" /><x-avatar color="purple" /><x-avatar color="fuchsia" /><x-avatar color="pink" /><x-avatar color="rose" /><x-avatar color="black" />
An option to remove the default border.
<x-avatar color="primary" borderless />
An option to generate a UI Avatar from a model based on name property.
<x-avatar :model="auth()->user()" color="fff" />
Generate a UI Avatar from a model based on a property different from name.
<x-avatar :model="auth()->user()" property="email" color="fff" />
Generate a UI Avatar from a model based customizing the colors.
<!-- "background" and "color" must be hexadecimals --> <x-avatar :model="auth()->user()" property="email" background="ff0000" color="fff" />
Interact with all other UI Avatar configuration options.
<x-avatar :model="auth()->user()" property="email" background="ff0000" color="fff" :options="['uppercase' => false, 'rounded' => true]"/>
An option to use an image as avatar.
<x-avatar image="https://i.pravatar.cc/300" xs /><x-avatar image="https://i.pravatar.cc/300" sm /><x-avatar image="https://i.pravatar.cc/300" md /><x-avatar image="https://i.pravatar.cc/300" lg />
You can also set the image via x-bind:src
from AlpineJS:
<div x-data="{ image: 'https://i.pravatar.cc/300' }"> <x-avatar image x-bind:src="image" /></div>
<x-avatar image="https://i.pravatar.cc/300" text="alt-text-goes-here" />