Expander

Control que muestra un encabezado y un área de contenido colapsable.

Uso

Un expander básico espera un encabezado y su contenido. Puedes configurar el encabezado pasando la propiedad `header`. El contenido puede proporcionarse como elementos hijos del componente. De forma predeterminada, el contenedor de contenido no tiene padding, lo que te permite usar el 100% del ancho del contenido si es necesario.

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

<Expander header="Expander Title">
  <p>This is the content of the expander</p>
</Expander>

API del componente

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

Control de expansión

Los expanders pueden estar expandidos o colapsados. Esto puede controlarse estableciendo la propiedad `expanded`.

Dirección de apertura

Un expander no tiene que expandirse hacia abajo. Puedes controlar la dirección de expansión de un expander usando la propiedad `direction`. Para crear un expander que se expanda hacia arriba, establece `direction` en `up`.

Agregar un icono

Puedes agregar fácilmente un icono al encabezado de un expander usando la propiedad `Icon`. Puedes pasar un Snippet o un Component.

Propiedades del componente

Name	Type	Description
header	string	Etiqueta del expander.
description	string	Descripción que se renderiza debajo del encabezado.
direction	string	La dirección de apertura del expander. Valores posibles: `'down'`, `'up'`.
justify	boolean	Si el expander se justifica al ancho completo del contenedor.
disabled	boolean	Deshabilita la interacción del usuario.
animation	object	La configuración de la animación.
expanded	boolean	Controla el estado de apertura del expander.
element	HTMLDetailsElement	La referencia DOM del elemento expander.
Icon	Snippet | Component	El icono que se muestra antes de la etiqueta.
children	Snippet	Los elementos hijos que se renderizarán dentro del expander.