Avatar
UIAvatar con imagen, iniciales auto-generadas, icono fallback, indicador de presencia y grupos.
Uso básico
Prioridad de render: imagen > iniciales > icono fallback.
MG
<x-kore::avatar src="https://i.pravatar.cc/150?u=1" name="Juan Pérez" />
<x-kore::avatar name="María García" />
<x-kore::avatar /><x-kore::avatar src="https://i.pravatar.cc/150?u=1" name="Juan Pérez" />
<x-kore::avatar name="María García" />
<x-kore::avatar />Tamaños
Cinco tamaños disponibles: xs, sm, md (default), lg, xl.
A
A
A
A
A
<x-kore::avatar name="AB" size="xs" />
<x-kore::avatar name="AB" size="sm" />
<x-kore::avatar name="AB" size="md" />
<x-kore::avatar name="AB" size="lg" />
<x-kore::avatar name="AB" size="xl" /><x-kore::avatar name="AB" size="xs" />
<x-kore::avatar name="AB" size="sm" />
<x-kore::avatar name="AB" size="md" />
<x-kore::avatar name="AB" size="lg" />
<x-kore::avatar name="AB" size="xl" />Con imagen
Cuando se proporciona src, se muestra la imagen.
<x-kore::avatar src="https://i.pravatar.cc/150?u=2" name="Ana López" />
<x-kore::avatar src="https://i.pravatar.cc/150?u=3" name="Carlos Ruiz" size="lg" /><x-kore::avatar src="https://i.pravatar.cc/150?u=2" name="Ana López" />
<x-kore::avatar src="https://i.pravatar.cc/150?u=3" name="Carlos Ruiz" size="lg" />Iniciales
Sin imagen, se generan iniciales automáticamente a partir del nombre.
JP
MG
P
<x-kore::avatar name="Juan Pérez" />
<x-kore::avatar name="María García" />
<x-kore::avatar name="Pedro" /><x-kore::avatar name="Juan Pérez" />
<x-kore::avatar name="María García" />
<x-kore::avatar name="Pedro" />Formas
Forma circular (default) o cuadrada.
C
S
<x-kore::avatar name="Circle" shape="circle" />
<x-kore::avatar name="Square" shape="square" /><x-kore::avatar name="Circle" shape="circle" />
<x-kore::avatar name="Square" shape="square" />Presencia
Indicador de estado: online, offline, busy, away.
J
M
P
A
<x-kore::avatar name="Juan" presence="online" />
<x-kore::avatar name="María" presence="busy" />
<x-kore::avatar name="Pedro" presence="away" />
<x-kore::avatar name="Ana" presence="offline" /><x-kore::avatar name="Juan" presence="online" />
<x-kore::avatar name="María" presence="busy" />
<x-kore::avatar name="Pedro" presence="away" />
<x-kore::avatar name="Ana" presence="offline" />Avatar Group
Agrupa avatares con solapamiento y slot de overflow.
U3
+
<x-kore::avatar-group>
<x-kore::avatar src="https://i.pravatar.cc/150?u=10" name="User 1" />
<x-kore::avatar src="https://i.pravatar.cc/150?u=11" name="User 2" />
<x-kore::avatar name="User 3" />
<x-slot:overflow>
<x-kore::avatar name="+5" />
</x-slot:overflow>
</x-kore::avatar-group><x-kore::avatar-group>
<x-kore::avatar src="https://i.pravatar.cc/150?u=10" name="User 1" />
<x-kore::avatar src="https://i.pravatar.cc/150?u=11" name="User 2" />
<x-kore::avatar name="User 3" />
<x-slot:overflow>
<x-kore::avatar name="+5" />
</x-slot:overflow>
</x-kore::avatar-group>Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
src
|
string|null | null | URL de imagen |
name
|
string|null | null | Nombre (genera iniciales) |
icon
|
string | user | Icono Lucide fallback |
size
|
string | md | Tamaño: xs, sm, md, lg, xl |
shape
|
string | circle | Forma: circle, square |
presence
|
string|null | null | Indicador: online, offline, busy, away |
presencePulse
|
bool | false | Animación pulse en online |