Positioning in Predefined Dialogs in Blazor
11 Aug 20225 minutes to read
Customize the dialog position by using the DialogOptions.Position property. The position can be represented with specific X
and Y
values.
- The
PositionDataModel.X
can be configured with a left, center, right, or offset value. By default, the value is set ascenter
. - The
PositionDataModel.Y
can be configured with a top, center, bottom, or offset value. By default, the value is set ascenter
.
Use the following code snippet for alert.razor, confirm.razor and prompt.razor to customize the position. Here, customized the dialog position as X= “top” and Y= “center”.
@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()
{
Position = new PositionDataModel() { X = "center", Y = "top" },
});
}
}
@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()
{
Position = new PositionDataModel() { X = "center", Y = "top" },
});
}
}
@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()
{
Position = new PositionDataModel() { X = "center", Y = "top" },
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>
});
}
}
Results from the code snippet
Alert
Confirm
Prompt