Flyout — Fluent UI Svelte

The Flyout component is a floating panel that can be used to display additional information or options in a non-intrusive way. It is fully accessible and follows Fluent UI design principles for a seamless user experience.

Usage

A flyout renders a floating surface around its content. On its own it is a static panel; set the floating prop and pass a reference element to have Floating UI position it against another element.

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

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

Round Corners

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

View Code

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

Component Props

Name	Type	Default	Description
`ref` bindable	`HTMLElement`		The DOM reference of the flyout element.
`children`	`Snippet`		The content of the flyout.
`floating`	`boolean`	`false`	Positions the flyout with floating-ui instead of leaving it in the normal flow.
`reference`	`HTMLElement`		The element the flyout is positioned against when `floating` is set.
`placement`	`Placement`	`'bottom'`	Where the flyout is placed relative to its reference.
`onPlacementChange`	`(placement: Placement) => void`		Called whenever floating-ui settles on a different placement.
`roundCorners`	`'all'` \| `'top'` \| `'bottom'` \| `'left'` \| `'right'`	`'all'`	Which corners of the flyout are rounded.
`offset`	`number`	`8`	The distance in pixels between the flyout and its reference.
`placementConfig`	`AutoPlacementOptions`		The auto placement configuration handed over to floating-ui.
Element Attributes (`div`)