Our Blazor Flyout component allows you to display a flyout window in your application. The window consists of the header, body, and footer elements. The header and footer are initially hidden. Set the HeaderVisible and FooterVisible properties to true to display these elements.
The HeaderText, BodyText, and FooterText properties specify text displayed in the Flyout elements.
To show or close the Flyout in code, implement two-way binding for the IsOpen property. Users can click outside the Flyout's boundaries, or press Escape to close the component from the UI.
Janet Leverling
Sales Representative
Margaret Peacock
Sales Representative
Steven Buchanan
Sales Manager
Michael Suyama
Sales Representative
The Flyout component uses predefined appearance settings if you specify the HeaderText, BodyText, or FooterText property. You can apply custom CSS classes to Flyout elements (BodyCssClass, HeaderCssClass, and FooterCssClass properties).
To customize the window's content, you can use the following templates:
- HeaderTextTemplate, BodyTextTemplate, FooterTextTemplate — Allow you to customize a Flyout element text area. These templates replace the text content area only.
- HeaderContentTemplate, BodyContentTemplate, FooterContentTemplate — Allow you to add custom content to a Flyout element. These templates replace the content area only.
- HeaderTemplate, BodyTemplate, FooterTemplate — Allow you to customize the entire area of Flyout elements. These templates change the default element rendering, including paddings, scroll bar, and inner content alignment.
FlyoutPosition: Bottom
Use the Position property to specify the Flyout position relative to a target element (PositionTarget) or to a Rectangle object (PositionRectangle). You can specify a list of available values or set the property to the Auto value to allow the Flyout component to determine the most suitable window position.
The Offset and Distance properties set the component offset and distance alongside/from the target element.
The Flyout recalculates its position when certain page elements are changed (for instance, when the page is scrolled or resized). Use the RestrictionMode property to restrict the Flyout position.
In this demo, the RestrictionMode property is set to TargetElement and the flyout window position is restricted by the target element's boundaries (RestrictionTarget).
The FitToRestriction property specifies whether the Flyout can overlap restriction boundaries. When the component does not meet the position restrictions, it can be hidden or closed, based on the CloseMode property value.