AvatarAvatar

El componente Avatar se usa para representar a una persona o un objeto, y admite varias formas, como imágenes, iconos o caracteres.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/avatar.js';

Importa el tipo TypeScript cuando lo necesites:

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

Uso:

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

Ejemplos

Avatar de imagen

Con el atributo src puedes usar un enlace de imagen como avatar, o usar un elemento <img> en el slot por defecto 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="Ejemplo de avatar de imagen"/>
</mdui-avatar>

Fuente

El atributo fit define cómo se adapta la imagen al contenedor, similar a object-fit nativo.

Avatar de icono

Con el atributo icon puedes usar un icono de Material Icons como avatar, o bien colocar un elemento de icono en el slot por defecto.

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

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

Fuente

Avatar de carácter

Puedes usar cualquier texto en el slot por defecto como avatar.

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

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`src`	`src`	`string`	-
URL de la imagen del avatar.
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
Cómo se ajusta la imagen al contenedor, igual que la propiedad nativa `object-fit`. Los valores posibles son: `contain`: Mantiene la relación de aspecto original de la imagen; el contenido se escala proporcionalmente `cover`: Mantiene la relación de aspecto original de la imagen, pero parte del contenido puede recortarse `fill`: Valor predeterminado; no mantiene la relación de aspecto original, el contenido se estira para llenar todo el contenedor `none`: Conserva las dimensiones originales de la imagen; el contenido no se escala ni se estira `scale-down`: Mantiene la relación de aspecto original, el tamaño del contenido es el mismo que el más pequeño entre `none` o `contain`
`icon`	`icon`	`string`	-
Nombre del icono de Material Icons para el avatar.
`label`	`label`	`string`	-
Texto alternativo del avatar.

Slots

Nombre
(predeterminado)
Contenido personalizado del avatar; puede contener letras, caracteres, elementos `<img>`, iconos, etc.

CSS Parts

Nombre
`image`
Elemento `<img>` interno del componente cuando se usa una imagen como avatar.
`icon`
Elemento `<mdui-icon>` interno del componente cuando se usa un icono como avatar.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.

Capítulo anterior

Otros

Capítulo siguiente

Badge Badge