Animation in Predefined Dialogs in Blazor

4 Nov 20255 minutes to read

The predefined dialogs (Alert, Confirm, and Prompt) support animation on open and close. Customize the animation Delay (ms), Duration (ms), and Effect using the DialogOptions.AnimationSettings property of type DialogAnimationSettings. The Effect accepts values from the DialogEffect enumeration. If not specified, the dialog uses its default animation settings.

In the following sample, the zoom effect (DialogEffect.Zoom) is used. The dialog opens with a zoom-in animation and closes with a zoom-out animation.

alert.razor

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <SfButton @onclick="@AlertBtn">Alert</SfButton>
    </div>
@code {
    private async Task AlertBtn()
    {
        await DialogService.AlertAsync("10% of battery remaining", "Low Battery", new DialogOptions()
            {
                AnimationSettings = new DialogAnimationSettings() { Effect = DialogEffect.Zoom},
            });
        }    
}

confirm.razor

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
    <div>
        <SfButton @onclick="@ConfirmBtn">Confirm</SfButton>
    </div>
@code {
        private async Task ConfirmBtn()
        {
            bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items", new DialogOptions()
            {
                 AnimationSettings = new DialogAnimationSettings() { Effect = DialogEffect.Zoom},
            });
    }
}

prompt.razor

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
    <div>
        <SfButton @onclick="@PromptBtn">Prompt</SfButton>
    </div>
@code {
    private async Task PromptBtn()
    {
        string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
        {
            AnimationSettings = new DialogAnimationSettings() { Effect = DialogEffect.Zoom},
            ChildContent = @<table class="Table">
                    <tbody>
                        <tr>
                            <td>SSID:</td>
                        </tr>
                        <tr>
                            <td><b>AndroidAP</b></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="e-input-group">
                                    <input type="password" id="password" name="Required" class="e-input">
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        });
    }
}