Avatar
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Densidade
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Icônico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Com letra
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Com imagem
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
alt
| Atributo | alt |
| Descrição | Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade. Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: "Foto de perfil de João Silva". |
| Tipo | string |
| Valor padrão | 'Foto de perfil do usuário' |
bgColor
| Atributo | bg-color |
| Descrição | Permite definir a cor de fundo do componente. Aceita os seguintes formatos de cor: - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. Se não especificada, usa a cor padrão do tema. |
| Tipo | string |
| Valor padrão | '#DBE8FB' |
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| Atributo | density |
| Descrição | Define a densidade visual do componente. - small: Baixa densidade (componente maior, mais espaçamento e altura).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Alta densidade (componente menor, menos espaçamento e altura).> Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam density. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
| Descrição | Desabilita a interação com o componente. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam disabled. |
| Tipo | boolean |
| Valor padrão | false |
isIconic
| Atributo | is-iconic |
| Descrição | Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem). Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível. |
| Tipo | boolean |
| Valor padrão | false |
src
| Atributo | src |
| Descrição | URL da imagem a ser exibida no avatar do tipo 'fotográfico'. Deve ser uma URL válida que aponta para a imagem desejada. |
| Tipo | string |
| Valor padrão | '' |
text
| Atributo | text |
| Descrição | Conteúdo textual do avatar. Apenas o primeiro caractere será exibido em maiúscula. |
| Tipo | string |
| Valor padrão | '' |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"container" | Elemento externo do avatar. |
"content" | Conteúdo interno do avatar (imagem, ícone ou texto). |
Dependências
Depende de
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
density | density | Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido. | "large" | "medium" | "small" | 'medium' |
iconic | is-iconic | Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem). | boolean | false |
image | src | URL da imagem a ser exibida no avatar do tipo 'fotográfico'. | string | --- |
name | text | Conteúdo textual do avatar. Apenas o primeiro caractere será exibido em maiúscula. | string | --- |
Eventos
🟦 Eventos renomeados
| Evento Vue | Evento Stencil | Descrição |
|---|---|---|
click | click | Evento emitido quando o avatar é clicado. |