Panel
A panel is a dialog that is anchored to the either left or right side of the screen. By implementing IDialogContentComponent<T>,
a component can be used as the content of a panel. The appearance of the panel can be altered by using the DialogParameters class.
Data can be exchanged between the panel and the component that opened the panel by 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)
or by using an EventCallback.
A panel can be shown by calling one of following methods on the DialogService:
ShowPanel<TDialogContent,TData>/ShowPanelAsync<TDialogContent,TData>ShowPanel<TData>/ShowPanelAsync<TData>
Internally, the ShowPanel methods call the ShowDialog methods. If is possible to directly call these methods and thereby have
access to all of the parameters. The ShowPanel variants are just convenience methods that make ite easier to work with panels.
For more information on how to use the DialogService, see the DialogService page.
Examples
Panels using async
The panel that is anchored to the right side of the screen can be dismissed by clicking the dismiss button (at the top),
'No' button (at the bottom) or by clicking outside of the panel.
The panel shown on the left side of the screen can only be closed by clicking the 'Cancel' button at the bottom of the panel. It does not show a dismiss button and is shown in a modal fashion based on the settings provided through the
The panel shown on the left side of the screen can only be closed by clicking the 'Cancel' button at the bottom of the panel. It does not show a dismiss button and is shown in a modal fashion based on the settings provided through the
DialogParameters.
Download:
Panels using callbacks
The panel that is anchored to the right side of the screen can be dismissed by clicking the dismiss button (at the top),
'No' button (at the bottom) or by clicking outside of the panel.
The panel shown on the left side of the screen can only be closed by clicking the 'Cancel'' button at the bottom of the panel. It does not show a dismiss button and is shown in a modal fashion based on the settings provided through the
The panel shown on the left side of the screen can only be closed by clicking the 'Cancel'' button at the bottom of the panel. It does not show a dismiss button and is shown in a modal fashion based on the settings provided through the
DialogParameters
Download:
Panels with validation
The panel that is anchored to the right side of the screen can be dismissed by clicking the dismiss button (at the top),
'No' button (at the bottom) or 'Yes' button (at the bottom).
Before the panel is closed, it will validate the data and, if not ok, will prevent the dialog from closing using the 'Yes' button.
Before the panel is closed, it will validate the data and, if not ok, will prevent the dialog from closing using the 'Yes' button.
Download:
Documentation
DialogParameters<TData> Class
Properties
Name | Type | Default | Description |
|---|---|---|---|
Alignment | HorizontalAlignment | Center | Gets or sets the dialog position: left (full height), right (full height) or screen middle (using Width and Height properties). HorizontalAlignment.Stretch is not supported for this property. |
AriaDescribedby | string? | Gets or sets the element that describes the element on which the attribute is set. | |
AriaLabel | string? | Gets or sets the value that labels an interactive element. | |
AriaLabelledby | string? | Gets or sets the element that labels the element it is applied to. | |
Content | TContent | Gets or sets the content to pass to and from the dialog. | |
DialogBodyStyle | string | Gets or sets the extra styles applied to the Body content. | |
DialogType | DialogType | Dialog | Gets or sets the type of dialog. |
DismissTitle | string? | Close | Gets or sets the Title of the dismiss button, display in a tooltip. Defaults to 'Close'. |
Height | string? | Gets or sets the height of the dialog. Must be a valid CSS height value like '600px' or '3em' Only used if Alignment is set to 'HorizontalAlignment.Center' | |
Item | Object | ||
Modal | bool? | True | Determines if the dialog is modal. Defaults to true. Obscures the area around the dialog. |
PreventDismissOnOverlayClick | bool | False | Determines if a modal dialog is dismissible by clicking outside the dialog. Defaults to false. |
PreventScroll | bool | True | Prevents scrolling outside of the dialog while it is shown. |
PrimaryAction | string? | OK | Gets or sets the text to display for the primary action. |
PrimaryActionEnabled | bool | True | When true, primary action's button is enabled. |
SecondaryAction | string? | Cancel | Gets or sets the text to display for the secondary action. |
SecondaryActionEnabled | bool | True | When true, secondary action's button is enabled. |
ShowDismiss | bool | True | Gets or sets a value indicating whether show the dismiss button in the header. Defaults to true. |
ShowTitle | bool | True | Gets or sets a value indicating whether show the title in the header. Defaults to true. |
Title | string? | Gets or sets the title of the dialog. | |
TrapFocus | bool? | True | Gets or sets a value indicating whether if dialog should trap focus. Defaults to true. |
ValidateDialogAsync | Func<Task<bool>> | Function that is called and awaited before the dialog is closed. | |
Visible | bool | True | Gets or sets if a dialog is visible or not (Hidden) |
Width | string? | Gets or sets the width of the dialog. Must be a valid CSS width value like '600px' or '3em' |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnDialogClosing | EventCallback<DialogInstance> | Callback function that is called and awaited before the dialog fully closes. |
OnDialogOpened | EventCallback<DialogInstance> | Callback function that is called and awaited after the dialog renders for the first time. |
OnDialogResult | EventCallback<DialogResult> | Callback function for the result. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
Add | string parameterName Object value | void | |
Get<T> | string parameterName | T? | |
GetDictionary | Dictionary<string, Object> | ||
GetEnumerator | IEnumerator<KeyValuePair<string, Object>> | ||
TryGet<T> | string parameterName | T? |