Dialog Customization
16 Sep 20254 minutes to read
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
property.
<SfDialog Width="400px">
<!-- Dialog content -->
</SfDialog>
MinHeight
Set the minimum height of the dialog using the MinHeight
property.
<SfDialog MinHeight="200px">
<!-- Dialog content -->
</SfDialog>
RTL Support
Enable RTL (Right-to-Left) layout using the EnableRtl
property.
<SfDialog EnableRtl="true">
<!-- Dialog content -->
</SfDialog>
CssClass
Apply custom CSS classes using the CssClass
property.
<SfDialog CssClass="custom-dialog">
<!-- Dialog content -->
</SfDialog>
Animation
The Blazor 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.
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.
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
<SfDialog Width="500px" ShowCloseIcon="true" @bind-Visible="@IsVisible">
<DialogTemplates>
<Header> Dialog </Header>
<Content> Dialog enabled with Zoom effect </Content>
</DialogTemplates>
<DialogAnimationSettings Effect="@AnimationEffect" Duration=400 />
<DialogButtons>
<DialogButton Content="Hide" IsPrimary="true" OnClick="@CloseDialog" />
</DialogButtons>
</SfDialog>
@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
Use the following CSS to customize the dialog header properties.
.e-dialog .e-dlg-header {
color: green;
font-size: 20px;
font-weight: normal;
}
Customizing the dialog content
Use the following CSS to customize the dialog content properties.
.e-dialog .e-dlg-content {
color: red;
font-size: 10px;
font-weight: normal;
line-height: normal;
}
Customizing modal dialog overlay
Use the following CSS to customize the modal dialog overlay.
.e-dlg-overlay {
background-color: slategray;
opacity: 0.6;
}
Customizing the dialog resize icon
Use the following CSS to customize the dialog resize icon.
/* To change the icon content */
.e-dialog .e-south-east::before, .e-dialog .e-south-west::before {
content: "\f047";
}
/* To set the icon pack */
.e-dialog .e-resize-handle {
font: normal normal normal 14px/1 FontAwesome;
}
The above CSS demonstration uses the font awesome icon.
Customizing the dialog close button
Use the following CSS to customize the dialog close button.
/* To specify font size and color */
.e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
font-size: 12px;
color: red;
}
Customizing the dialog footer button
Use the following CSS to customize the dialog footer button.
/* To specify font color, background color and border color */
.e-dialog .e-btn.e-flat, .e-css.e-btn.e-flat {
background-color: transparent;
border-color: transparent;
color: blue;
}