Overlay
Overlays are used to temporarily overlay screen content to focus a dialog, progress or other information/interaction.
Examples
Default
Overlay with a default background (= NeutralBaseColor (#808080)) and default opacity (0.4).
Download:
Timed
A timed overlay that hides after being shown for 3 seconds
Download:
Transparent overlay
Overlay with a transparent background
Download:
Background color
Overlay with a custom background color
Download:
Full screen
Overlay which takes up the whole screen.
Download:
Interactive
By using the
In this example, the FluentOverlay will only close when the user clicks outside the white zone and the user can increment the counter before to close the Overlay.
Interactive and InteractiveExceptId properties, only the targeted element will not close the FluentOverlay panel.
The user can click anywhere else to close the FluentOverlay.In this example, the FluentOverlay will only close when the user clicks outside the white zone and the user can increment the counter before to close the Overlay.
Counter: 0
Download:
Documentation
FluentOverlay Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Alignment | Align | Center | Gets or sets the alignment of the content to a Align value.Defaults to Align.Center. |
BackgroundColor | string? | Gets or sets the background color. Needs to be formatted as an HTML hex color string (#rrggbb or #rgb) Default NeutralBaseColor token value (#808080). | |
ChildContent | RenderFragment? | ||
Dismissable | bool | True | Gets of sets a value indicating if the overlay can be dismissed by clicking on it. Default is true. |
FullScreen | bool | False | Gets or sets a value indicating whether the overlay is shown full screen or bound to the containing element. |
Interactive | bool | False | Gets or sets a value indicating whether the overlay is interactive, except for the element with the specified FluentOverlay.InteractiveExceptId.In other words, the elements below the overlay remain usable (mouse-over, click) and the overlay will closed when clicked. |
InteractiveExceptId | string? | Gets or sets the HTML identifier of the element that is not interactive when the overlay is shown. This property is ignored if FluentOverlay.Interactive is false. | |
Justification | JustifyContent | Center | Gets or sets the justification of the content to a JustifyContent value.Defaults to JustifyContent.Center. |
Opacity | double? | Gets or sets the opacity of the overlay. Default is 0.4. | |
PreventScroll | bool | False | |
Transparent | bool | True | Gets or set if the overlay is transparent. |
Visible | bool | False | Gets or sets a value indicating whether the overlay is visible. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnClose | EventCallback<MouseEventArgs> | Callback for when the overlay is closed. |
VisibleChanged | EventCallback<bool> | Callback for when overlay visibility changes. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
DisposeAsync | ValueTask | Disposes the overlay. | |
OnCloseHandlerAsync | MouseEventArgs e | Task | |
OnCloseInteractiveAsync | MouseEventArgs e | Task |