BjAvatar

Composant Vue pour l’avatar DSBJ : image, initiales, icône Remix ou slot ; tailles, carré et pastille de statut.

Utilisation

<script setup>
import { BjAvatar } from '@flrxnt/dsbj/vue'
</script>

<template>
  <BjAvatar src="https://i.pravatar.cc/100?img=3" alt="Photo de profil" />
  <BjAvatar initials="AK" />
  <BjAvatar icon="ri-user-line" />
  <BjAvatar status="online" src="https://i.pravatar.cc/100?img=8" alt="" />
</template>

Tailles

SMMDLGXL

<BjAvatar size="sm" initials="SM" />
<BjAvatar size="md" initials="MD" />
<BjAvatar size="lg" initials="LG" />
<BjAvatar size="xl" initials="XL" />

Contenu

AKAB

<BjAvatar src="https://i.pravatar.cc/100?img=3" alt="Photo de profil" />

<BjAvatar initials="AK" />

<BjAvatar icon="ri-user-line" />

<BjAvatar>
  <span class="bj-text" style="font-size: 0.65rem; font-weight: 700">AB</span>
</BjAvatar>

Carré

<BjAvatar square size="sm" src="https://i.pravatar.cc/100?img=5" alt="Photo de profil" />
<BjAvatar square size="md" src="https://i.pravatar.cc/100?img=5" alt="Photo de profil" />
<BjAvatar square size="lg" src="https://i.pravatar.cc/100?img=5" alt="Photo de profil" />
<BjAvatar square size="xl" src="https://i.pravatar.cc/100?img=5" alt="Photo de profil" />

Statut

<BjAvatar status="online" src="https://i.pravatar.cc/100?img=3" alt="Photo de profil" />
<BjAvatar status="away" src="https://i.pravatar.cc/100?img=3" alt="Photo de profil" />
<BjAvatar status="busy" src="https://i.pravatar.cc/100?img=3" alt="Photo de profil" />
<BjAvatar status="offline" src="https://i.pravatar.cc/100?img=3" alt="Photo de profil" />

Combinaisons

BKXL

<BjAvatar square status="online" size="lg" src="https://i.pravatar.cc/100?img=3" alt="Photo de profil" />
<BjAvatar square status="busy" size="md" initials="BK" />
<BjAvatar status="away" size="sm" icon="ri-user-line" />
<BjAvatar status="offline" size="xl" initials="XL" />

Slot par défaut

Si aucune image, initiales ni prop icon ne sont fournis, le slot par défaut remplit l’avatar (ex. logo ou initiales personnalisées).

<BjAvatar>
  <span class="bj-text" style="font-size: 0.65rem; font-weight: 700">AB</span>
</BjAvatar>

Événements

Pas d’événement personnalisé : utilisez les écouteurs natifs sur la racine (ex. @click sur BjAvatar, propagés sur le <span>).

<BjAvatar initials="AK" role="button" tabindex="0" @click="openMenu" />

Props

Prop	Description
`size`	Taille : sm, md (défaut), lg ou xl.
`square`	Variante carrée (bj-avatar--square).
`src`	URL de l’image ; si défini, affiche bj-avatar__img.
`alt`	Texte alternatif de l’image (défaut chaîne vide).
`initials`	Initiales affichées si pas d’image ni d’icône (bj-avatar__initials).
`icon`	Classe d’icône Remix (ex. ri-user-line) si pas d’image ni d’initiales.
`status`	Pastille de statut : online, away, busy ou offline.