Persona

Documentación del componente Persona.

Uso

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

<Persona
	name="John Doe"
	primaryText="Software Engineer"
	secondaryText="Intranet"
	tertiaryText="Team A"
	presence={{ status: 'available' }}
	avatar={{ color: 'colorful' }}
/>

API del componente

Alineación del texto

Persona admite tres alineaciones de texto, siendo 'left' la posición predeterminada.

Posición del texto

Persona admite cuatro posiciones de texto: 'top', 'bottom', 'left' y 'right'. La posición predeterminada es 'right'.

Tamaño

Persona admite tamaños personalizados, con un valor predeterminado de 42px. Puedes establecer el tamaño usando la prop size. Esto se aplica tanto al avatar o al modo solo presencia como a todo el texto.

Avatar

Persona envuelve un avatar en su interior, que puede personalizarse con todas las props disponibles del componente Avatar.

Presencia

Persona puede mostrar información de presencia, como el estado en línea o la disponibilidad. Esto se controla mediante la prop presence, que acepta un objeto con una clave status.

Propiedades del componente

Name	Type	Description
name	string	El nombre completo de la persona.
primaryText	string	Texto principal, normalmente el rol o cargo de la persona.
secondaryText	string	Texto secundario, por ejemplo ubicación o estado.
tertiaryText	string	Texto terciario, por ejemplo equipo o departamento.
size	number	Tamaño en píxeles para el avatar y el texto.
textAlign	string	Alineación del texto. Los valores posibles son 'left', 'center' y 'right'.
textPosition	string	Posición del texto con respecto al avatar. Los valores posibles son 'top', 'bottom', 'left' y 'right'.
avatarAlign	string	Alineación en el eje transversal del avatar con respecto al texto. Los valores posibles son 'start', 'center' y 'end'.
avatar	object	Objeto de props del avatar. Consulta el componente Avatar para más detalles.
presence	object	Objeto de presencia, por ejemplo undefined. Los valores de estado son 'available', 'away', 'busy', 'do-not-disturb', 'offline', 'out-of-office', 'blocked' y 'unknown'.
presenceOnly	boolean	Muestra solo el indicador de presencia, sin avatar ni texto.
element	HTMLDivElement	La referencia del DOM del elemento raíz de Persona.