Dialog

As defined by the W3C:

A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.

Like non-modal dialogs, modal dialogs contain their tab sequence. That is, Tab and Shift + Tab do not move focus outside the dialog. However, unlike most non-modal dialogs, modal dialogs do not provide means for moving keyboard focus outside the dialog window without closing the dialog.

<FluentDialog> wraps the <fluent-dialog> element, a web component implementation of a dialog leveraging the Fluent UI design system. <FluentDialog> acts as a shell for the dialog content, which can be specified in a number of ways.

DialogService

The DialogService is a service which is used to show different types of dialogs. It is registered as a scoped service, so it can be injected into pages/components that use it. For more information on the DialogService, see the Dialog Service page.

Dialog content

Normally, the dialog content is specified by a component which implements IDialogContentComponent<T>. This component is then passed to the DialogService to be shown. The DialogService will then render a <FluentDialog> with the component inside of it.

Alternatively, the dialog content can be specified manually by setting the ChildContent parameter of <FluentDialog>. This is useful if you want to show a simple dialog without having to create a component for it or if you do not want to use the DialogService for it.
When using the DialogService, for displaying a regular dialog, the dialog will always be shown centered on the screen.

During the WASM DotNet Publication process, the unused classes are automatically removed from the final library. The Dialog razor file will be removed if no reference are set by your code. For example, if you call var = await DialogService.ShowDialogAsync<SimpleDialog>(simplePerson, parameters); the SimpleDialog will be removed by the WASM Publication process. You can configure this behavior by setting the PublishTrimmed property in your project file or you can create a temporary instance var temp1 = new SimpleDialog(); to force the Publication process to keep this class in the final library.

Exchange data between dialog and calling component

There are two ways available to exchange data between the dialog and the component which shows it. The first is by capturing the returned IDialogReference from one of the DialogService.Show...Async methods and then use that reference to get the dialog's result (of type DialogResult). The second is by using an EventCalback parameter as part of the DialogParameters. Both ways are demonstated in the samples below.

Dialog provider

Dialogs are rendered by the <FluentDialogProvider /> component. This component needs to be added to the main layout of your application/site. You typically do this in the MainLayout.razor file at the end of the <main> section like this:

    <main>
    <nav>
    :
    </nav>
    <div class="content">
    <article id="article">
    @Body
    </article>
    </div>
    <FluentDialogProvider />
    </main>

Examples

These examples show how to use the DialogService to display a dialog. The content of the dialog is specified by a component which implements IDialogContentComponent<T>. Here, that is done in SimpleDialog.razor. The dialog is automatically styled and centered.

Interaction with parent dialog can be made by injecting FluentDialog as Cascading Parameter. See SimpleDialog.razor for more details.

DialogService with IDialogReference

Customized Dialog

Editable Dialog

DialogService with EventCallback

DialogService with Custom Animations

Dialog without using DialogService

SimpleDialog as component

RenderFragment as dialog

Documentation

To alter the properties of a dialog which uses the DialogService to display it, use the DialogParameters class.

Note: Not all properties can be used for all types of dialogs. For example, the DialogParameters class has a Height property, which is ignored when displaying a Panel.

Dialog header and footer

The dialog header and footer can be changed by using the FluentDialogHeader and FluentDialogFooter component.

The default implementation uses the FluentDialogHeader and FluentDialogFooter components (see documentation below). You can use the content of these components as the base for your own implementation:

Default dialog header (simplified version)

    <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Top">
    <div style="width: 100%;">
    <FluentLabel Typo="Typography.PaneHeader">@Title</FluentLabel>
    </div>
    <FluentButton Appearance="Appearance.Stealth">
    <FluentIcon Icon="CoreIcons.Regular.Size24.Dismiss" />
    <FluentButton>
    </FluentStack>

Default dialog footer (simplified version)

    <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Right" VerticalAlignment="VerticalAlignment.Bottom">
    <FluentButton Title="@PrimaryAction" Appearance="Appearance.Accent" Disabled="@PrimaryActionEnabled">
    @PrimaryAction
    </FluentButton>
    <FluentButton Title="@SecondaryAction" Appearance="Appearance.Neutral" Disabled="@SecondaryActionEnabled">
    @SecondaryAction
    </FluentButton>
    </FluentStack>