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.

Ver Código

<Avatar
  active="active"
  size={56}
  name="FluentUI Svelte"
  image={{ src: 'https://placehold.co/120x120/jpeg' }}
  badge={{ status: 'do-not-disturb' }}
/>

Ícono

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

Ver Código

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

<Avatar active="active" size={56} name="FluentUI Svelte" icon={ClockRegular} color="information" />

Badge

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

Ver Código

<Avatar active="active" size={56} name="FluentUI Svelte" badge={{ status: 'available' }} />

Forma

Un avatar puede tener forma cuadrada, circular o redondeada.

Ver Código

<Avatar active="active" size={56} name="FluentUI Svelte" badge={{ status: 'available' }} />
<Avatar active="active" size={56} name="FluentUI Svelte" badge={{ status: 'available' }} shape="rounded" />
<Avatar active="active" size={56} name="FluentUI Svelte" badge={{ status: 'available' }} shape="square" />

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.

Ver Código

<Avatar active="active" size={56} name="FluentUI Svelte" color="colorful" />
<Avatar active="active" size={56} name="FluentUI Svelte" color="colorful" />
<Avatar active="active" size={56} name="FluentUI Svelte" color="colorful" />

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`		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