diff --git a/blazor-toc.html b/blazor-toc.html index 34cc4ec003..ac24cd8b04 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2596,6 +2596,9 @@
  • Draggable
    • +
  • + Dialog Buttons +
  • Resizing
    • diff --git a/blazor/dialog/dialogbuttons.md b/blazor/dialog/dialogbuttons.md new file mode 100644 index 0000000000..f5681b5194 --- /dev/null +++ b/blazor/dialog/dialogbuttons.md @@ -0,0 +1,204 @@ +--- +layout: post +title: Dialog Buttons in Blazor Dialog Component | Syncfusion +description: Checkout and learn here all about how to add Dialog buttons and add icons to Dialog buttons in Syncfusion Blazor Dialog component and more. +platform: Blazor +control: Dialog +documentation: ug +--- + +# Dialog Buttons + +The Syncfusion Blazor Dialog component supports rendering one or more action buttons in its footer using the [DialogButtons Tag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtons.html) element. Inside this element, each button is defined using the [DialogButton Tag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html). These buttons can be fully customized with various properties, including: + +DialogButtonOptions | Description +------------ | ------------- + [ChildContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_ChildContent) | Allows you to define custom content (e.g., HTML or string) inside the button. + [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_Content) | Sets the text displayed on the button. + [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_CssClass) | Applies one or more custom CSS classes to style the button. + [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_Disabled) | Disables the button, preventing user interaction. + [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_EnableRtl) | Enables right-to-left (RTL) rendering for languages like Arabic or Hebrew. + [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IconCss) | Specifies the CSS class for an icon to be displayed inside the button. + [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IconPosition) | Determines the position of the icon (e.g., Left, Right, Top, Bottom). + [IsFlat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IsFlat) | Renders the button with a flat style (no background or border). + [IsPrimary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IsPrimary) | Highlights the button as the primary action in the dialog. + [IsToggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IsToggle) | Enables toggle behavior, allowing the button to switch between active/inactive states. + [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_OnClick) | Assigns a callback method to be executed when the button is clicked. + [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_Type) | Specifies the button type (e.g., Button, Submit, Reset). + +Here is simple example with Dialog Buttons: +```cshtml +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +
    + Open Dialog + + + +
    Dialog
    + This is a standard dialog with footer buttons +     + + + + +     +
    + + + +@code { + private bool IsVisible { get; set; } = true; + + private void OpenDialog() + { + this.IsVisible = true; + } + + private void OnOkClick() + { + // Place your OK logic here + this.IsVisible = false; + } + + private void OnCancelClick() + { + // Place your Cancel logic here + this.IsVisible = false; + } +} +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrejPMsqToGRKoa?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +![Blazor Dialog buttons](./images/blazor-dialog-buttons.gif) + +# Add Icons to Dialog Buttons in Blazor Dialog Component + +You can enhance the appearance of dialog footer buttons by adding icons using either the [DialogButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html) element or the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_FooterTemplate) property. + +## Using DialogButton Element + +The DialogButton element allows you to define action buttons in the dialog footer with built-in support for icons. You can use the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IconCss) property to assign icon classes and customize their appearance. + +```cshtml + +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +Open Dialog + + + +
    +
    Delete Multiple Items
    +
    + +
    Are you sure you want to permanently delete all of these items?
    +     +     + + + + +     + + + +@code { + private bool IsVisible { get; set; } = true; + + private void OpenDialog() + { + this.IsVisible = true; + } + + private void CloseDialog() + { + this.IsVisible = false; + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVyDbCsKPeJFQuN?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +![Blazor Dialog buttons with icon](./images/blazor-dialog-button-with-icon.gif) + +## Using FooterTemplate Property + +Alternatively, you can use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_FooterTemplate) property to fully customize the footer layout and include buttons with icons manually using Syncfusion Button. + +```cshtml + +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +Open Dialog + + + +
    Delete Multiple Items
    + Are you sure you want to permanently delete all of these items? + + + Yes + + + No + + +     +     + + + +@code { + private bool IsVisible { get; set; } = true; + + private void OpenDialog() + { + this.IsVisible = true; + } + + private void CloseDialog() + { + this.IsVisible = false; + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLItlWiqllSFBlC?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +![Preview showing icons in Blazor Dialog footer buttons using FooterTemplate](./images/blazor-dialog-button-with-icon.gif) \ No newline at end of file diff --git a/blazor/dialog/images/blazor-dialog-button-with-icon.gif b/blazor/dialog/images/blazor-dialog-button-with-icon.gif new file mode 100644 index 0000000000..3cf74397df Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-button-with-icon.gif differ diff --git a/blazor/dialog/images/blazor-dialog-buttons.gif b/blazor/dialog/images/blazor-dialog-buttons.gif new file mode 100644 index 0000000000..7bf18edea3 Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-buttons.gif differ