Flyout — Fluent UI Svelte

El componente Flyout es un panel flotante que puede usarse para mostrar información u opciones adicionales de una forma no intrusiva. Es totalmente accesible y sigue los principios de diseño de Fluent UI para ofrecer una experiencia de usuario fluida.

Uso

Un flyout renderiza una superficie flotante alrededor de su contenido. Por sí solo es un panel estático; activa la propiedad floating y pasa un elemento reference para que Floating UI lo posicione respecto a otro elemento.

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

<Flyout>
  <p>This is the content of the flyout.</p>
</Flyout>

Esquinas redondeadas

Usa la propiedad roundCorners para controlar qué esquinas del flyout se redondean. Acepta 'all', 'top', 'bottom', 'left' o 'right'.

Ver Código

<Flyout roundCorners="top">
  <p>This is the content of the flyout.</p>
</Flyout>

Propiedades del componente

Name	Type	Default	Description
`ref` bindable	`HTMLElement`		La referencia del DOM del elemento flyout.
`children`	`Snippet`		El contenido del flyout.
`floating`	`boolean`	`false`	Posiciona el flyout con floating-ui en lugar de dejarlo en el flujo normal.
`reference`	`HTMLElement`		El elemento respecto al que se posiciona el flyout cuando `floating` está activo.
`placement`	`Placement`	`'bottom'`	Dónde se coloca el flyout respecto a su referencia.
`onPlacementChange`	`(placement: Placement) => void`		Se llama cada vez que floating-ui se decide por una colocación distinta.
`roundCorners`	`'all'` \| `'top'` \| `'bottom'` \| `'left'` \| `'right'`	`'all'`	Qué esquinas del flyout se redondean.
`offset`	`number`	`8`	La distancia en píxeles entre el flyout y su referencia.
`placementConfig`	`AutoPlacementOptions`		La configuración de colocación automática que se entrega a floating-ui.
Element Attributes (`div`)