Avatar

Avatar component.

Avatar, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->avatar()
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# Basic Usage

<x-avatar text="TS" />

# Color Variations

<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="TS" color="white" />

# Size Variations

<x-avatar text="XS" xs />
<x-avatar text="SM" sm />
<x-avatar text="MD" md />
<x-avatar text="LG" lg />

# Square Variations

<x-avatar text="TS" square />

# Placeholder

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" />
<x-avatar color="white" />

# Borderless NEW

An option to remove the default border.

<x-avatar color="primary" borderless />

Modelable

# Modelable

An option to generate a UI Avatar from a model based on name property.

<x-avatar :model="auth()->user()" color="fff" />

# Custom Property

Generate a UI Avatar from a model based on a property different from name.

<x-avatar :model="auth()->user()" property="email" color="fff" />

# Customizing Colors

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" />

# Other Options

Interact with all other UI Avatar configuration options.

<x-avatar :model="auth()->user()"
          property="email"
          background="ff0000"
          color="fff"
          :options="['uppercase' => false, 'rounded' => true]"
/>

Image

# Image NEW

An option to use an image as avatar.

<x-avatar image="https://aj.dev.br/assets/images/aj.jpg" xs />
<x-avatar image="https://aj.dev.br/assets/images/aj.jpg" sm />
<x-avatar image="https://aj.dev.br/assets/images/aj.jpg" md />
<x-avatar image="https://aj.dev.br/assets/images/aj.jpg" lg />

# Default Alt Text NEW

<x-avatar image="https://aj.dev.br/assets/images/aj.jpg" text="alt-text-goes-here" />