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" />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.
Ícono
Un avatar puede mostrar un ícono. El ícono solo se mostrará cuando no haya una imagen o iniciales disponibles.
Badge
Un avatar puede tener un badge para indicar el estado de presencia. Consulta el componente PresenceBadge para más información.
Forma
Un avatar puede tener forma cuadrada, circular o redondeada.
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.
Propiedades del componente
| Name | Type | Default | Description |
|---|---|---|---|
name | string | 'Avatar' | El nombre de la persona o entidad que representa este Avatar. Conviene indicarlo siempre que se disponga de él. |
image | { src: string; } | La imagen del Avatar | |
ref bindable | HTMLDivElement | null | La referencia del DOM del elemento avatar. | |
size | number | 48 | Tamaño del avatar en píxeles. |
shape | 'circular' | 'rounded' | 'square' | 'circular' | El avatar puede tener forma circular, redondeada o cuadrada. |
color | Colors | 'colorful' | 'attention' | El color cuando se muestra un icono o las iniciales. Por ahora solo admite los colores del sistema (más colorful). |
active | 'active' | 'inactive' | Indicador de actividad opcional | |
activeAppearance | 'ring' | 'shadow' | 'ring-shadow' | 'ring' | La apariencia cuando active="active" |
initials | string | name | Iniciales personalizadas; por defecto se derivan de la prop name. |
idForColor | string | Indica una cadena que se usa en lugar del nombre para determinar qué color aplicar cuando color="colorful". | |
icon | Snippet | Component | Icono que se muestra cuando el avatar no tiene imagen ni iniciales. | |
badge | BadgePresence | El badge que se muestra como indicador de estado. (se puede usar con un icono personalizado) | |
| HTML Attributes |