How is a Flyout positioned?

By default it is a plain panel; enable the floating prop to position it with Floating UI relative to a reference element, controlled by placement and offset.

Can I round only some corners of a Flyout?

Yes. The roundCorners prop accepts 'all', 'top', 'bottom', 'left', or 'right'.

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

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

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

The 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

Component Props

Name	Type	Description
`ref`	Bindable `HTMLElement`	The DOM reference to the flyout element.
`children`	`Snippet`	The content to be displayed inside the flyout.
`floating`	`boolean`	Whether to use Floating UI for positioning. Default: false.
`reference`	`HTMLElement`	The reference element for Floating UI.
`placement`	`Placement`	The placement for Floating UI positioning. Default: 'bottom'.
`onPlacementChange`	`(placement: Placement) => void`	A callback that is called when the placement changes.
`roundCorners`	`'all'` \| `'top'` \| `'bottom'` \| `'left'` \| `'right'`	Which corners to round. Default: 'all'.
`offset`	`number`	The offset for Floating UI positioning. Default: 8.
Element Attributes		All other attributes that can be applied to the flyout element.