SAvatar <s-avatar>

Mostra a imagem de uma pessoa ou empresa, ou as iniciais dela quando não há imagem. SAvatar é o wrapper de Vue 3 tipado do web component <s-avatar> do Shopify Polaris.

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

Boas práticas

• Ajuste o tamanho ao contexto. Escolha um size menor para layouts densos, como tabelas e listas, e um maior em páginas de perfil, onde a pessoa é o foco.
• Escreva um texto alternativo útil. Defina em alt quem ou o que o avatar representa, como o nome de uma pessoa ou de uma empresa. Se esse nome já aparece como texto ao lado do avatar, use um alt vazio.
• Mantenha-o junto ao que ele representa. Coloque o avatar logo ao lado do nome ou da entidade que ele representa, para que a relação fique clara em listas, tabelas e cards.

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

Veja as boas práticas da Shopify para <s-avatar> (em inglês) para todas as recomendações.

Exemplo

As imagens abaixo são carregadas de picsum.photos, um serviço externo de imagens de placeholder, apenas para fins de demonstração.

<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	Descrição
alt	string	Texto alternativo que descreve o avatar para fins de acessibilidade. Fornece uma descrição textual do avatar para usuários de tecnologias assistivas e serve como alternativa quando o avatar não carrega. Uma descrição bem escrita permite que pessoas com deficiência visual entendam conteúdo não textual. Quando um leitor de tela encontra um avatar, ele lê essa descrição em voz alta. Quando um avatar não carrega, esse texto é exibido na tela, ajudando todos os usuários a entender qual conteúdo deveria aparecer. Saiba mais sobre como escrever um texto alternativo eficaz e o atributo alt.
initials	string	As iniciais exibidas no avatar quando nenhuma imagem é fornecida ou ela não carrega. Normalmente um ou dois caracteres que representam as iniciais do nome e do sobrenome de uma pessoa, como "JD" para John Doe.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200"	O tamanho da imagem do avatar. - small-200: avatar extra pequeno, adequado para exibições compactas ou listas com muitos itens. - small-100: alias de small. - small: avatar pequeno, bom para contextos secundários ou layouts apertados. - base: tamanho padrão que funciona bem na maioria dos contextos. - large: avatar grande para dar ênfase ou quando o avatar é o ponto focal. - large-100: alias de large. - large-200: avatar extra grande para exibição em destaque.
src	string	A URL ou o caminho da imagem do avatar. Quando fornecida, a imagem tem prioridade sobre initials. Se a imagem não carregar ou carregar lentamente, initials será exibido como alternativa.

Events

Event	Tipo
error	Event
load	Event

Escute-os com listeners no estilo @error em <SAvatar>.