Avatar
Introdução
Um elemento de perfil de usuário baseado em imagem que exibe identificadores gráficos personalizados. Ele retrocede com elegância para iniciais de nome formatadas ou um ícone de espaço reservado universal quando as fontes de imagem são omitidas, estão carregando ou falham ao carregar. Usado principalmente para gatilhos de navegação de perfil, listas de mensagens, avaliações e diretórios da comunidade.
O componente Avatar está totalmente integrado como um bloco avatar no Page Builder, permitindo que autores de conteúdo e desenvolvedores configurem facilmente caminhos de perfil, escalas de tamanho e temas visuais diretamente no CMS.
Uso
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam componentes de avatar.
1. Avatar de perfil de alta fidelidade (com fonte de imagem)
Carrega uma imagem de usuário de alta resolução. Gerencia automaticamente o carregamento de rede em segundo plano e anima para a visualização assim que resolvida.
{
"type": "avatar",
"src": "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=200&auto=format&fit=crop",
"name": "Jane Doe",
"size": "lg",
"interactive": true
}
2. Retorno de iniciais acentuadas (sem fonte de imagem)
Quando a imagem de perfil está ausente, o Avatar analisa automaticamente a propriedade name do usuário para calcular e renderizar as iniciais em maiúsculas corretas (por ex. "Jane Doe" -> "JD") sobre um tema de cor acentuado.
{
"type": "avatar",
"name": "Jane Doe",
"variant": "solid",
"colorPalette": "blue",
"size": "md",
"interactive": true
}
3. Avatar placeholder arredondado
Renderiza um ícone de usuário arredondado padrão quando nenhum caminho de imagem ou nome de usuário é fornecido.
{
"type": "avatar",
"shape": "rounded",
"size": "md",
"interactive": true
}
Propriedades
| Propriedade | Tipo de campo CMS | Padrão | Descrição / Opções suportadas |
|---|---|---|---|
Imagem de perfil (src) | image | - | URL de imagem ou caminho de recurso relativo. Fornecer isso aciona a hidratação de Nível 2. |
Nome de usuário (name) | string | - | Nome de conta do usuário. Analisa os primeiros e últimos caracteres em iniciais visuais. |
Detalhes alternativos (alt) | string | - | Descrições textuais alternativas da foto para leitores de tela. |
Escala de tamanho (size) | select | "md" | Controla a altura, a largura e a escala de texto das iniciais do avatar. • Opções: "2xs", "xs", "sm", "md", "lg", "xl", "2xl". |
Variante visual (variant) | select | "subtle" | Sobreposição de estilo aplicada ao fundo das iniciais de retorno. • Opções: "solid", "surface", "subtle", "outline". |
Formato de canto (shape) | select | "full" | Curvatura dos limites do avatar. • Opções: "square", "rounded", "full". |
Tema de cor (colorPalette) | select | "blue" | Cor de acento usada para temas de fundo de retorno. • Opções: blue, green, red, purple, orange, amber, cyan, slate. |
Forçar interativo (interactive) | boolean | true | Garante monitoramento de carregamento imediato do lado do cliente e transições de retorno suaves. |
Notas para desenvolvedores e acessibilidade
- Ilha de hidratação: O Avatar é executado como uma ilha condicional de Nível 2. Se nenhuma imagem
srcfor especificada, ele compila diretamente para marcação estática leve com pegada de JS do cliente zero. Se umasrcfor fornecida, ele hidrata no cliente para gerenciar automaticamente os ciclos de carregamento assíncrono (loading->loaded/error). - Conformidade WAI-ARIA: Nos bastidores, as iniciais e ícones de retorno operam dentro de tags
<span>semânticas. Se o avatar desempenha um papel puramente decorativo, certifique-se de que o atributoaltseja omitido ou deixado em branco para que os leitores de tela o ignorem.