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>

Control de expansión

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

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

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

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

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.

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

<Expander header="Expander With Icon" Icon={InfoRegular}>
  <p>This is the content of the expander</p>
</Expander>

Propiedades del componente