如何使用自定义 DialogPosition 来定位 MudBlazor 对话框？

Question

给定一个 MudBlazor MudDialog 组件，其位置设置为 DialogPosition.Custom，该对话框将绝对定位在视口的左上角。

@{
   var dialogOptions = new DialogOptions
   {
     Position = DialogPosition.Custom,
   };
}
<MudDialog Options="@dialogOptions" Class="custom-dialog">
  <DialogContent>
    Hello World.
  </DialogContent>
</MudDialog>

选项中没有位置属性。该文档根本没有引用自定义定位。

组件呈现后，CSS 类

.custom-dialog

不会应用于对话框父级，而是应用于树下几层的静态 div，因此无法对其应用位置样式。

有办法设置自定义位置吗？

Answer 1

当您将其设置为

DialogPostion.Custom

时，它将

.mud-dialog-custom

类应用于对话框父级。

这是一个未定义的类，所以我相信它被设计为被重写。因此，您只需使用该类来应用您的自定义位置即可。

例如

家长剃刀

@inject IDialogService DialogService

<MudButton @onclick="OpenDialogCustom" Variant="Variant.Filled" Color="Color.Primary">
    Open Custom Dialog with positioning
</MudButton>
@code {
    private void OpenDialogCustom()
    {
        var options = new DialogOptions { Position=DialogPosition.Custom};
        DialogService.Show<MyCustomDialog>("CustomPosition dialog", options);
    }
}

MyCustomDialog.razor

<style>
    .mud-dialog-custom{
        display: grid;
        align-content: center;
        justify-content: space-between;
        justify-items: end;
    }
</style>

<MudDialog>
  <DialogContent>
    Hello World.
  </DialogContent>
</MudDialog>

尝试 MudBlazor 片段