Skip to content

DOCS(BLAZ-974890): Revamp the Blazor Dialog documentation to improve clarity and usability #6394

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: development
Choose a base branch
from
Open

DOCS(BLAZ-974890): Revamp the Blazor Dialog documentation to improve clarity and usability #6394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions blazor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2606,10 +2606,7 @@
<a href="/blazor/dialog/template">Templates</a>
</li>
<li>
<a href="/blazor/dialog/animation">Animation</a>
</li>
<li>
<a href="/blazor/dialog/style">Style and Appearance</a>
<a href="/blazor/dialog/style">Dialog Customization</a>
</li>
<li>
<a href="/blazor/dialog/localization">Localization</a>
Expand Down
114 changes: 112 additions & 2 deletions blazor/dialog/style.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<SfDialog Width="400px">
<!-- Dialog content -->
</SfDialog>
```

### 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
<SfDialog MinHeight="200px">
<!-- Dialog content -->
</SfDialog>
```

### 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
<SfDialog EnableRtl="true">
<!-- Dialog content -->
</SfDialog>
```

### 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
<SfDialog CssClass="custom-dialog">
<!-- Dialog content -->
</SfDialog>
```

### 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" %}

<!-- markdownlint-disable MD033 -->
<table>
<tr>
<td>
delay</td><td>
The Dialog animation will start with the mentioned delay</td></tr>
<tr>
<td>
duration</td><td>
Specifies the animation duration to complete with one animation cycle</td></tr>
<tr>
<td>
effect</td><td>
Specifies the animation effects of Dialog open and close actions effect.
<br /><br />
List of supported animation effects:
<br />
'Fade' | 'FadeZoom' | 'FlipLeftDown' | 'FlipLeftUp' | 'FlipRightDown' | 'FlipRightUp' | 'FlipXDown' |
'FlipXUp' | 'FlipYLeft' | 'FlipYRight' | 'SlideBottom' | 'SlideLeft' | 'SlideRight' | 'SlideTop' |
'Zoom'| 'None'
<br /><br />
If the user sets 'Fade' effect, then the Dialog will open with 'FadeIn' effect and close with 'FadeOut' effect
</td></tr>
</table>

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

<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

Expand Down