Persona

Una Persona es la representación visual de una persona. Envuelve un Avatar junto con información de presencia y hasta cuatro líneas de texto: el nombre más los textos primario, secundario y terciario.

John Doe

Software Engineer

Intranet

Team A

Presence Only

Available

Alex Johnson

Available

Custom Size

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' }}
/>

Alineación del texto

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

Ver Código

<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" />
<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textAlign="center" />
<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textAlign="right" />

Alex Johnson

Available

Alex Johnson

Available

Alex Johnson

Available

Posición del texto

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

Ver Código

<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" />
<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textPosition="bottom" textAlign="center" />
<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textPosition="left" />
<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textPosition="top" textAlign="center" />

Alex Johnson

Available

Alex Johnson

Available

Alex Johnson

Available

Alex Johnson

Available

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.

Ver Código

<Persona name="John Doe" size={24} />
<Persona name="John Doe" size={32} />
<Persona name="John Doe" size={56} />

John Doe

Avatar

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

Ver Código

<Persona name="John Doe" avatar={{ color: "attention" }} />
<Persona name="John Doe" avatar={{ color: "colorful", idForColor: '' }} />
<Persona name="John Doe" avatar={{ image: { src: 'https://placehold.co/96x96/jpeg', alt: 'Placeholder Image' } }} />

John Doe

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.

Ver Código

<Persona name="John Doe" presence={{ status: 'available' }} />
<Persona name="John Doe" presence={{ status: 'away' }} />
<Persona name="John Doe" presence={{ status: 'busy' }} />
<Persona name="John Doe" presence={{ status: 'do-not-disturb' }} />
<Persona name="John Doe" presence={{ status: 'offline' }} />
<Persona name="John Doe" presence={{ status: 'out-of-office' }} />
<Persona name="John Doe" presence={{ status: 'blocked' }} />
<Persona name="John Doe" presence={{ status: 'unknown' }} />

John Doe

Propiedades del componente

Name	Type	Default	Description
`name`	`string`		El nombre de la persona o entidad que representa esta Persona. El avatar también lo usa para sus iniciales.
`size`	`number`	`42`	El tamaño del avatar en píxeles. El texto escala con él.
`primaryText`	`string`		Texto que se muestra bajo el nombre.
`secondaryText`	`string`		Texto que se muestra bajo el texto primario.
`tertiaryText`	`string`		Texto que se muestra bajo el texto secundario.
`textAlign`	`'left'` \| `'center'` \| `'right'`	`'left'`	Cómo se alinea el bloque de texto.
`textPosition`	`'top'` \| `'bottom'` \| `'left'` \| `'right'`	`'right'`	Dónde se sitúa el bloque de texto respecto al avatar.
`presenceOnly`	`boolean`		Renderiza el badge de presencia por sí solo, sin el avatar detrás.
`avatarAlign`	`'start'` \| `'center'` \| `'end'`	`'center'`	Cómo se alinea el avatar respecto al bloque de texto.
`element` bindable	`HTMLDivElement`		La referencia del DOM del elemento persona.
`avatar`	`AvatarProps`		Las props que se aplican al avatar.
`presence`	`BadgePresence`		El badge de presencia que se muestra como indicador de estado.