AvatarAvatar

O Avatar representa uma pessoa ou objeto, suportando várias formas, incluindo imagens, ícones ou caracteres.

Como usar

Importe o componente quando necessário:

import 'mdui/components/avatar.js';

Importe o tipo TypeScript do componente quando necessário:

import type { Avatar } from 'mdui/components/avatar.js';

Exemplo de uso:

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

Exemplos

Avatar com imagem

Use o atributo src para definir um link de imagem como avatar, ou adicionar um elemento <img> no slot padrão como avatar.

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

<mdui-avatar>
  <img src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4" alt="Exemplo de avatar com imagem"/>
</mdui-avatar>

Fonte

Use o atributo fit para definir como a imagem se ajusta ao contêiner, similar ao object-fit nativo.

Avatar com ícone

Use o atributo icon para definir um ícone do Material Icons como avatar, ou adicione um elemento de ícone no slot padrão.

<mdui-avatar icon="people_alt"></mdui-avatar>

<mdui-avatar>
  <mdui-icon name="people_alt"></mdui-icon>
</mdui-avatar>

Fonte

Avatar com caractere

Use qualquer texto no slot padrão como avatar.

<mdui-avatar>A</mdui-avatar>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`src`	`src`	`string`	-
A URL da imagem do avatar.
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
Define como a imagem se ajusta ao contêiner, igual à propriedade nativa `object-fit`. Os valores possíveis são: `contain`: Mantém a proporção original da imagem; o conteúdo é dimensionado proporcionalmente. `cover`: Mantém a proporção original da imagem, mas parte do conteúdo pode ser cortada. `fill`: Valor padrão. Não mantém a proporção original; o conteúdo é esticado para preencher todo o contêiner. `none`: Mantém o tamanho original da imagem; o conteúdo não é dimensionado ou esticado. `scale-down`: Mantém a proporção original da imagem; o tamanho do conteúdo é o menor entre `none` e `contain`.
`icon`	`icon`	`string`	-
Nome do ícone Material Icons para o avatar.
`label`	`label`	`string`	-
Texto alternativo para o avatar.

Slots

Nome
(padrão)
Conteúdo personalizado do avatar. Pode ser letras, caracteres chineses, um elemento `<img>`, ícone, etc.

CSS Parts

Nome
`image`
Elemento `<img>` dentro do componente quando uma imagem é usada como avatar.
`icon`
Elemento `<mdui-icon>` dentro do componente quando um ícone é usado como avatar.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Tamanho da borda arredondada do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

Capítulo anterior

Outros

Próximo capítulo

Badge Badge