Flyout

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

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

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

El Flyout.

Round Corners

Use the roundCorners prop to control which corners of the flyout are rounded. It accepts 'all', 'top', 'bottom', 'left', or 'right'.

Propiedades del componente

Name	Type	Description
ref	Bindable HTMLElement	La referencia del DOM al elemento flyout.
children	Snippet	El contenido que se mostrará dentro del flyout.
floating	boolean	Indica si se debe usar Floating UI para el posicionamiento. Valor predeterminado: false.
reference	HTMLElement	El elemento de referencia para Floating UI.
placement	Placement	La ubicación para el posicionamiento con Floating UI. Valor predeterminado: 'bottom'.
onPlacementChange	(placement: Placement) => void	Una devolución de llamada que se ejecuta cuando cambia la ubicación.
roundCorners	'all' | 'top' | 'bottom' | 'left' | 'right'	Qué esquinas redondear. Valor predeterminado: 'all'.
offset	number	El desplazamiento para el posicionamiento con Floating UI. Valor predeterminado: 8.
Element Attributes		Todos los demás atributos que se pueden aplicar al elemento flyout.