diff --git a/blazor-toc.html b/blazor-toc.html index 34cc4ec003..06f59a61e2 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2606,10 +2606,7 @@ Templates
  • - Animation -
    • -
  • - Style and Appearance + Dialog Customization
  • Localization diff --git a/blazor/dialog/style.md b/blazor/dialog/style.md index ea4d68f037..e859945b08 100644 --- a/blazor/dialog/style.md +++ b/blazor/dialog/style.md @@ -7,9 +7,119 @@ control: Dialog documentation: ug --- -# Style and Appearance in Blazor Dialog Component +## Dialog Customization -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The Syncfusion Blazor Dialog component allows extensive customization options to enhance its appearance and behavior. You can modify its dimensions, support RTL layouts, apply custom styles, and animate its display. + +### Width + +You can set the width of the dialog using the [`Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Width) property. + +```razor + + + +``` + +### MinHeight + +Set the minimum height of the dialog using the [`MinHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_MinHeight) property. + +```razor + + + +``` + +### RTL Support + +Enable RTL (Right-to-Left) layout using the [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_EnableRtl) property. + +```razor + + + +``` + +### CssClass + +Apply custom CSS classes using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_CssClass) property. + +```razor + + + +``` + +### Animation + +The [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) can be animated during the open and close actions. Also, users can customize animation's `Delay`, `Duration` and `Effect` by using the `DialogAnimationSettings` property. + +To get started quickly with animation in Blazor Dialog Component, you can check the video below. + +{% youtube "https://www.youtube.com/watch?v=qNW5d7C2L7g" %} + + + + + + + + + +
    +delay +The Dialog animation will start with the mentioned delay
    +duration +Specifies the animation duration to complete with one animation cycle
    +effect +Specifies the animation effects of Dialog open and close actions effect. +

    +List of supported animation effects: +
    +'Fade' | 'FadeZoom' | 'FlipLeftDown' | 'FlipLeftUp' | 'FlipRightDown' | 'FlipRightUp' | 'FlipXDown' | +'FlipXUp' | 'FlipYLeft' | 'FlipYRight' | 'SlideBottom' | 'SlideLeft' | 'SlideRight' | 'SlideTop' | +'Zoom'| 'None' +

    +If the user sets 'Fade' effect, then the Dialog will open with 'FadeIn' effect and close with 'FadeOut' effect +
    + +In the following sample, `Zoom` effect is enabled. So, The Dialog will open with `ZoomIn` and close with `ZoomOut` effects. + +```cshtml + +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +Open Dialog + + + +
    Dialog
    + Dialog enabled with Zoom effect +     + + + + +     + +@code { + private bool IsVisible { get; set; } = true; + private DialogEffect AnimationEffect = DialogEffect.Zoom; + + private void OpenDialog() + { + this.IsVisible = true; + } + + private void CloseDialog() + { + this.IsVisible = false; + } +} + +``` ## Customizing the dialog header