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