Flyout

Edit This Page

Flyouts represent a control that displays lightweight UI that is either information, or requires user interaction. Unlike a ContentDialog, a Flyout can be dismissed by clicking or tapping outside of it, or pressing the Esc key.

import { Flyout } from "fluent-svelte";
Flyout

Usage

Flyout is a wrapper component. Items placed into the default slot will open the flyout when clicked. To insert contents into the flyout itself, you use the flyout slot.

<Flyout>
	<Button>Trigger Button</Button>
	<svelte:fragment slot="flyout">Flyout Contents</svelte:fragment>
</Flyout>

Opening and Closing

Flyouts will not be rendered into the DOM until they are opened. A flyout can be opened by the user either with keyboard navigation or by clicking items in the flyout’s wrapper element.

You can control if the flyout is open using the open property.

<Flyout open>
	<svelte:fragment slot="flyout">This flyout is open by default.</svelte:fragment>
</Flyout>

You can also use Svelte’s two-way binding syntax to programatically open/close a flyout.

<script>
	import { Flyout, Button } from "fluent-svelte";

	let open = false;
</script>

<Flyout bind:open>
	<Button>Open</Button>
	<Button on:click={() => (open = false)} slot="flyout">Close</Button>
</Flyout>

Additionally, flyouts can be closed by pressing the escape key or clicking on contents behind the flyout. If you wish to disable this behavior, you can set the closable property to false.

Positioning

There are three aspects to the positioning system of flyouts - placement, alignment, and offset.

  • The offset property controls the distance between the flyout and the flyout wrapper in pixels. The default offset is 8.
  • The placement property is the direction that the flyout will be opened from. This can be either top, bottom, left, or right.
  • The alignment property controls either the vertical or horizontal alignment of the flyout along a given placement axis. This can be either start, center, or end.

Focus Behavior

Flyouts utilize a focus trap, which restricts keyboard navigation focus to only the flyout’s content. If you wish to disable this behavior, you can set the trapFocus property to false.

Overriding Flyouts

For more niche use cases, you can completely override the flyout element with your own container using the override slot.

<Flyout>
	<Button>Open</Button>
	<div slot="override" style="background-color: red; padding: 24px; min-inline-size: 240px;">
		Custom flyout containers! <button>Hello World!</button>
	</div>
</Flyout>

Component API

API docs automatically generated by sveld and vite-plugin-sveld.

Props

NameTypeDefaultDescription
open boolean false Determines the flyout's visibility.
closable boolean true Determines if the flyout can be closed using conventional user interaction.
placement string "top" Direction that the flyout will be opened from.
alignment string "center" Alignment of the menu along the clickable target's given axis.
offset number 4 Distance of the flyout from the control button in pixels.
trapFocus boolean true Determines if keyboard focus should be locked to the dialog's contents.
wrapperElement null | HTMLDivElement null Obtains a bound DOM reference to the content wrapper element.
anchorElement null | HTMLDivElement null Obtains a bound DOM reference to the menu's positioning anchor element.
menuElement any null Obtains a bound DOM reference to the inner menu element.
backdropElement null | HTMLDivElement null Obtains a bound DOM reference to the menu backdrop, which is present while the menu is `open`.

Slots

NameSlot PropsFallback
Unnamed (Default) {} Empty
flyout {} Empty
override {} <FlyoutSurface bind:element={menuElement}> <slot name="flyout" /> </FlyoutSurface>

Events

All DOM events are forwarded to this component's respective elements by default. Learn More

Dispatched Events

NameDetail
open None
close None