diff --git a/blazor/dialog/accessibility.md b/blazor/dialog/accessibility.md index 04acbddb42..34921f0483 100644 --- a/blazor/dialog/accessibility.md +++ b/blazor/dialog/accessibility.md @@ -56,40 +56,33 @@ Keyboard interaction of Blazor Dialog component has been designed based on [WAI- - - + - - +Esc - - - - - - - - diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md index 65e481ddd1..24a58c1812 100644 --- a/blazor/dialog/getting-started-with-web-app.md +++ b/blazor/dialog/getting-started-with-web-app.md @@ -227,7 +227,8 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog](./images/blazor-dialog.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog](./images/blazor-dialog.png) N> * In the dialog control, max-height is calculated based on the dialog target element height. If the **Target** property is not configured, the **document.body** is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element. @@ -260,7 +261,8 @@ The dialog component is maintained in the DOM after hiding the dialog when the [ {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Prerender Blazor Dialog](./images/blazor-prerender-dialog.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Prerender Blazor Dialog](./images/blazor-prerender-dialog.png) ## Modal Blazor dialog @@ -330,7 +332,8 @@ The Dialog header can be enabled by adding the header content as text or HTML co {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Header](./images/blazor-dialog-header.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Header](./images/blazor-dialog-header.png) ## Render Blazor Dialog with buttons @@ -387,7 +390,8 @@ By adding the [DialogButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.B {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png) N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Dialog). diff --git a/blazor/dialog/getting-started.md b/blazor/dialog/getting-started.md index 2c84a0f593..f2bdef622c 100644 --- a/blazor/dialog/getting-started.md +++ b/blazor/dialog/getting-started.md @@ -157,7 +157,8 @@ Add the Syncfusion® Blazor Dialog component * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog](./images/blazor-dialog.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog](./images/blazor-dialog.png) N> * In the dialog control, max-height is calculated based on the dialog target element height. If the **Target** property is not configured, the **document.body** is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element. @@ -190,7 +191,8 @@ The dialog component is maintained in the DOM after hiding the dialog when the [ {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Prerender Blazor Dialog](./images/blazor-prerender-dialog.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Prerender Blazor Dialog](./images/blazor-prerender-dialog.png) ## Modal Blazor dialog @@ -260,7 +262,8 @@ The Dialog header can be enabled by adding the header content as text or HTML co {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Header](./images/blazor-dialog-header.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Header](./images/blazor-dialog-header.png) ## Render Blazor Dialog with buttons @@ -317,7 +320,8 @@ By adding the [DialogButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.B {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png) ## See also diff --git a/blazor/dialog/how-to/add-minimize-and-maximize-button.md b/blazor/dialog/how-to/add-minimize-and-maximize-button.md index 81b4d410a3..85bbbcce7e 100644 --- a/blazor/dialog/how-to/add-minimize-and-maximize-button.md +++ b/blazor/dialog/how-to/add-minimize-and-maximize-button.md @@ -25,22 +25,15 @@ Blazor Dialog allows end users to either minimize or maximize the Dialog compone
Dialog - @if (!IsMaximized) + @if (!IsMaximized ) { } - else - { - - } - @if (!IsMinimized) + + @if (IsMaximized) { } - else - { - - }

This is a dialog with minimize and maximize buttons

@@ -152,7 +145,6 @@ Blazor Dialog allows end users to either minimize or maximize the Dialog compone @code { public bool IsMaximized { get; set; } = false; - public bool IsMinimized { get; set; } = false; private SfDialog DialogObj; private bool IsVisible { get; set; } = false; public string dialogClass = ""; @@ -165,17 +157,17 @@ Blazor Dialog allows end users to either minimize or maximize the Dialog compone IsMaximized = !IsMaximized; if (IsMaximized) { - await JsRuntime.InvokeVoidAsync("Dialog.maximize"); + await jsRuntime.InvokeVoidAsync("Dialog.maximize"); } } private async Task minimize() { - IsMinimized = !IsMinimized; - if (IsMinimized) + IsMaximized = !IsMaximized; + if (!IsMaximized) { - await JsRuntime.InvokeVoidAsync("Dialog.minimize"); + await jsRuntime.InvokeVoidAsync("Dialog.minimize"); } } } diff --git a/blazor/dialog/how-to/prevent-closing-of-modal-dialog.md b/blazor/dialog/how-to/prevent-closing-of-modal-dialog.md index da7058430f..1a309d6592 100644 --- a/blazor/dialog/how-to/prevent-closing-of-modal-dialog.md +++ b/blazor/dialog/how-to/prevent-closing-of-modal-dialog.md @@ -9,7 +9,7 @@ documentation: ug # Prevent Closing of Modal Dialog in Blazor Dialog Component -You can prevent closing of modal dialog by setting the `OnClose` event argument cancel value to `true`. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed. +You can prevent closing of modal dialog by setting the `OnClose` event argument cancel value to `true`. In the following sample, the dialog is closed when you enter the username and password values with minimum 4 characters. Otherwise, it will not be closed. ```cshtml diff --git a/blazor/dialog/how-to/prevent-opening-of-the-dialog.md b/blazor/dialog/how-to/prevent-opening-of-the-dialog.md index c89f102aca..b245230ed7 100644 --- a/blazor/dialog/how-to/prevent-opening-of-the-dialog.md +++ b/blazor/dialog/how-to/prevent-opening-of-the-dialog.md @@ -9,7 +9,7 @@ documentation: ug # Open a Dialog on condition in Blazor Dialog Component -You can prevent opening of the dialog by setting the `OnOpen` event argument cancel value to true. In the following sample, the success dialog is opened when you enter the username value with minimum 4 characters. Otherwise, it will not be opened. +You can prevent opening of the dialog by setting the `OnOpen` event argument cancel value to true. In the following sample, the success dialog is opened when you enter the username and password values with minimum 4 characters. Otherwise, it will not be opened. ```cshtml diff --git a/blazor/dialog/positioning.md b/blazor/dialog/positioning.md index 4e306c1677..88c7bb038e 100644 --- a/blazor/dialog/positioning.md +++ b/blazor/dialog/positioning.md @@ -37,35 +37,35 @@ The following code demonstrates the different Dialog positions.
WindowsMac -Actions
+Keyboard shortcuts +Actions
-EscEscCloses the Dialog. This functionality can be controlled by using closeOnEscape
+Closes the Dialog. This functionality can be controlled by using closeOnEscape
-EnterEnterWhen the Dialog button or any input (except text area) is in focus state, when +Enter +When the Dialog button or any input (except text area) is in focus state, when pressing the Enter key, the click event associated with the primary button or button will trigger. Enter key does not work when the Dialog content contains any text area with initial focus
-Ctrl + Enter⌘ + EnterWhen the Dialog content contains text area and it is in focus state, press the Ctrl + Enter +Ctrl + Enter +When the Dialog content contains text area and it is in focus state, press the Ctrl + Enter key to call the click event function associated with primary button
-TabTab +Tab Focus will be changed within the Dialog elements
-Shift + Tab⇧ + Tab +Shift + Tab The Focus will be changed previous focusable element within the Dialog elements. When focusing a first focusable element in the Dialog, then press the shift + tab key, it will change the focus to last focusable element
- + - + - +
- + - + - +
- + - + - +