SAvatar <s-avatar>

Muestra la imagen de una persona o de una empresa, o sus iniciales cuando no hay imagen. SAvatar es el wrapper de Vue 3 tipado del web component <s-avatar> de Shopify Polaris.

import { SAvatar } from 'polaris-vue-elements'

Buenas prácticas

• Ajusta el tamaño al contexto. Elige un size más pequeño para diseños densos como tablas y listas, y uno más grande en páginas de perfil donde la persona es el centro de atención.
• Escribe un texto alternativo útil. Indica en alt a quién o qué representa el avatar, por ejemplo el nombre de una persona o de una empresa. Si ese nombre ya aparece como texto junto al avatar, usa en su lugar un alt vacío.
• Mantenlo junto a lo que representa. Coloca el avatar justo al lado del nombre o la entidad que representa, para que la relación quede clara en listas, tablas y tarjetas.

<SAvatar alt="Sarah Chen" initials="SC" size="large" />

Consulta las buenas prácticas de Shopify para <s-avatar> (en inglés) para ver todas las recomendaciones.

Ejemplo

Las imágenes de abajo se cargan desde picsum.photos, un servicio externo de imágenes de marcador de posición, solo con fines de demostración.

<script setup>
import { SAvatar } from 'polaris-vue-elements'
</script>

<template>
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="small" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="base" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="large" />

  <!-- No src: falls back to initials -->
  <SAvatar initials="AL" alt="Ada Lovelace" size="large" />
</template>

Props

Prop	Tipo	Descripción
alt	string	Texto alternativo que describe el avatar con fines de accesibilidad. Proporciona una descripción textual del avatar para los usuarios de tecnologías de asistencia y sirve como alternativa cuando el avatar no se carga. Una descripción bien redactada permite a las personas con discapacidad visual comprender el contenido no textual. Cuando un lector de pantalla encuentra un avatar, lee esta descripción en voz alta. Cuando un avatar no se carga, este texto se muestra en pantalla y ayuda a todos los usuarios a entender qué contenido debía aparecer. Obtén más información sobre cómo escribir texto alternativo eficaz y el atributo alt.
initials	string	Las iniciales que se muestran en el avatar cuando no se proporciona una imagen o esta no se carga. Normalmente uno o dos caracteres que representan las iniciales del nombre y el apellido de una persona, como "JD" para John Doe.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200"	El tamaño de la imagen del avatar. - small-200: avatar extra pequeño, adecuado para vistas compactas o listas con muchos elementos. - small-100: alias de small. - small: avatar pequeño, adecuado para contextos secundarios o diseños ajustados. - base: tamaño predeterminado que funciona bien en la mayoría de los contextos. - large: avatar grande para dar énfasis o cuando el avatar es el punto focal. - large-100: alias de large. - large-200: avatar extra grande para una presentación destacada.
src	string	La URL o ruta de la imagen del avatar. Si se proporciona, la imagen tiene prioridad sobre initials. Si la imagen no se carga o tarda en cargarse, se muestra initials como alternativa.

Events

Event	Tipo
error	Event
load	Event

Escúchalos con listeners del estilo @error en <SAvatar>.