Visualización
Avatar
Un componente para mostrar avatares de usuario con iniciales, imágenes, indicadores y múltiples tamaños.
Uso
El componente SAvatar muestra un avatar de usuario. Muestra iniciales derivadas de la prop name, o una imagen cuando se proporciona src.
Tamaños
Usa la prop size para cambiar el tamaño del avatar.
Iniciales
El componente genera automáticamente las iniciales a partir de la prop name. Soporta nombres separados por espacios, guiones, puntos y otros delimitadores comunes.
<template>
<SAvatar name="Sarah Adams" size="lg" />
<SAvatar name="Bob" size="lg" />
</template>
Con Imagen
Usa la prop src para mostrar una imagen en lugar de las iniciales.
Sin Borde
Establece borderless en true para remover el borde outline.
Indicador
Establece indicator en true para mostrar un punto de indicador de estado. Usa indicatorPosition para controlar su posición.
Indicador con Imagen
<template>
<SAvatar
name="Jane Doe"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=facearea&facepad=2&w=256&h=256"
size="lg"
:indicator="true"
indicator-position="right-top"
/>
</template>
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
name | string | '?' | Nombre usado para generar las iniciales. También se usa como texto alt para imágenes |
src | string | '' | URL de la imagen. Cuando se proporciona, muestra una imagen en lugar de las iniciales |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Tamaño del avatar |
borderless | boolean | false | Remueve el borde outline |
indicator | boolean | false | Muestra un punto indicador de estado |
indicatorPosition | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'right-top' | Posición del punto indicador |
class | string | - | Clases CSS adicionales |