Customize the Appearance in Blazor Dialog Component
16 Mar 20224 minutes to read
You can customize the dialog appearance by providing dialog template as string or HTML element to the Content
template property. In the following code block, dialog is customized as error window appearance.
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
<SfDialog Width="400px" ShowCloseIcon="true" CloseOnEscape="true" @bind-Visible="@IsVisible">
<DialogTemplates>
<Header> File and Folder Rename </Header>
<Content>
<div class='msg-wrapper col-lg-12'>
<span class='e-icons close-icon col-lg-2'></span>
<span class='error-msg col-lg-10'>Cannot rename 'pictures' because a file or folder with that name already exists</span>
</div>
<div class='error-detail col-lg-8'>
<span>Specify a different name</span>
</div>
</Content>
</DialogTemplates>
<DialogAnimationSettings Effect="@AnimationEffect" Duration=400 />
<DialogButtons>
<DialogButton Content="Close" 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;
}
}
<style>
.e-btn.e-flat.e-primary, .e-btn.e-flat.e-primary:focus {
background-color: #317ab9;
border-color: #265f91;
color: #fff;
}
.e-btn.e-flat.e-primary:hover, .e-btn.e-flat.e-primary:active {
background-color: #21527d;
border-color: #163854;
color: #fff;
}
.close-icon {
width: 24px;
height: 24px;
position: relative;
display: inline-block;
}
.error-msg {
color: #66afe9;
display: inline-block;
position: relative;
top: -20px;
left: 10px;
}
.error-detail {
position: relative;
left: 56px;
margin: 0 0 21px;
}
.e-icons.close-icon.col-lg-2:before {
content: '\e7e9';
font-size: 26px;
color: #d9534f;
position: relative;
left: 1px;
bottom: 18px;
}
.e-dialog .e-footer-content {
background-color: #f8f8f8;
}
.e-dialog.e-control.e-popup, .e-dialog.e-control.e-popup .e-dlg-header-content {
background-color: #d9edf7;
}
.e-dialog.e-control.e-popup {
padding: 3px;
}
.e-dialog.e-control .e-dlg-header-content {
padding: 10px;
}
.e-dialog.e-control .e-footer-content {
padding: 8px 12px;
}
.e-dialog.e-control .e-dlg-content {
padding: 15px 0 0;
}
.msg-wrapper.col-lg-12 {
margin-top: 20px;
}
</style>