Avatar

An image with a fallback for the user.

1 fichier

<div class="flex items-center gap-4">
  <pb-ui.avatar src="https://github.com/shadcn.png" alt="@shadcn" fallback="CN" />
  <pb-ui.avatar fallback="PL" />
  <pb-ui.avatar fallback="AM" class="size-12 text-base" />
</div>

Installation

pyblade-ui add avatar

Copiez ce fichier dans votre projet

components/ui/avatar.html

@props({'src': None, 'alt': '', 'fallback': ''})
<span data-slot="avatar" {{ attributes.cn("relative flex size-8 shrink-0 overflow-hidden rounded-full") }}>
  @if(src)
  <img src="{{ src }}" alt="{{ alt }}" class="aspect-square size-full object-cover" />
  @else
  <span class="flex size-full items-center justify-center rounded-full bg-muted text-xs font-medium">{{ fallback }}</span>
  @endif
</span>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

La balise <pb-ui.avatar> est disponible dans tous vos templates.

<pb-ui.avatar :src="user.photo_url" fallback="JD" />

Exemples

Groupe

<div class="flex -space-x-2">
  <pb-ui.avatar fallback="AL" class="ring-2 ring-background" />
  <pb-ui.avatar fallback="GH" class="ring-2 ring-background" />
  <pb-ui.avatar fallback="AT" class="ring-2 ring-background" />
  <pb-ui.avatar fallback="+3" class="ring-2 ring-background" />
</div>

Props

Prop	Défaut
src	None
alt	''
fallback	''

Tout autre attribut (class, id, x-on:click, hx-post…) est transmis à l'élément racine ; vos classes Tailwind l'emportent sur celles du composant.

‹ Badge Alert ›