What does an Avatar display when no image is provided?

When there is no image, the Avatar shows the initials derived from the name prop. If neither an image nor initials are available, it can display an icon instead.

How does the colorful color option pick a color?

Setting color to "colorful" automatically picks a color based on the name prop. When a name is unavailable, idForColor can be used to determine the color from another unique identifier.

How do I show a presence status on an Avatar?

Pass a badge object such as badge={{ status: "available" }} to display a presence badge. See the PresenceBadge component for the available statuses.

Avatar

Un Avatar es una representación gráfica de un usuario, equipo o entidad.

Avatar puede mostrar una imagen, un ícono o iniciales, y admite distintos tamaños, formas e indicadores de estado.

Uso

<script>
	import { Avatar } from 'fluentui-svelte';
</script>

<Avatar size={40} name="FluentUI Svelte" />

API del componente

Una breve explicación de las props que realmente necesitan explicación. Puedes ver el resto de las props aquí.

Imagen

Un avatar puede mostrar una imagen. También se recomienda incluir un nombre además de la imagen: las iniciales del nombre se muestran mientras la imagen se carga, y el nombre hace que Avatar sea accesible para los lectores de pantalla.

View Code

Ícono

Un avatar puede mostrar un ícono. El ícono solo se mostrará cuando no haya una imagen o iniciales disponibles.

View Code

Badge

Un avatar puede tener un badge para indicar el estado de presencia. Consulta el componente PresenceBadge para más información.

View Code

Forma

Un avatar puede tener forma cuadrada, circular o redondeada.

View Code

Color: colorido

Un avatar puede tener el color elegido automáticamente en función de la prop name, o se puede usar idForColor si no hay un nombre disponible.

View Code

Props del componente

Name	Type	Description
`name`	`string`	El nombre de la persona o entidad representada por este Avatar. Se usa para determinar las iniciales y para herramientas de accesibilidad.
`image`	`{ src: string }`	La imagen del Avatar. Solo puede ser una única URL de imagen.
`ref`	`HTMLDivElement`	La referencia del DOM del elemento avatar.
`size`	`number`	Tamaño del avatar en píxeles.
`shape`	`string`	La forma del avatar. Valores posibles: 'circular', 'rounded', 'square'.
`color`	`string`	El color que se usa al mostrar un ícono o iniciales. Admite colores del sistema. Valores posibles: 'information', 'attention', 'warning', 'success', 'critical', 'colorful'.
`active`	`string`	Indicador opcional de actividad. Valores posibles: 'active', 'inactive'. Active decora el avatar según activeAppearance. Inactive reduce el tamaño y lo hace parcialmente transparente.
`activeAppearance`	`string`	La apariencia que se usa cuando active está configurado como active. Valores posibles: 'ring', 'shadow', 'ring-shadow'.
`initials`	`string`	Iniciales personalizadas. De forma predeterminada, las iniciales se derivan de la prop name usando la función getInitials. Se muestran cuando no hay imagen.
`idForColor`	`string`	Una cadena que se usa en lugar del nombre para determinar el color cuando color está configurado como colorful. Es útil cuando no hay un nombre disponible pero existe otro identificador único.
`icon`	`Snippet` \| `Component`	El ícono que se muestra cuando el avatar no tiene imagen ni iniciales.
`badge`	`object`	El badge que se muestra como indicador de estado. Puede incluir un ícono personalizado.