Question

使用MatBlazor（1.5.4）MatDialog，我对固定对话框大小或将对话框大小设置为页面总数的百分比感兴趣。当前，行为是对话框打开时其大小适合内容。

我尝试在对话框定义的不同部分添加显式样式，但没有成功。

<MatDialog @bind-IsOpen="@IsDialogOpen" Style="width: 600px; height:600px">
    <MatDialogTitle>Some title</MatDialogTitle>
    <MatDialogContent Style="width: 600px; height:600px">This is the content</MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@(() => this.IsDialogOpen = false)" Icon="close">Close</MatButton>
    </MatDialogActions>
</MatDialog>

@code
{
    private bool IsDialogOpen { get; set; }
}

MatDialog组件中似乎没有集成任何显式机制，因此我认为需要显式的样式/ CSS。

控制对话框大小的正确方法是什么？

Answer 1

默认情况下，表面对话框会增长以适合内容，最大宽度为560px。

@media (min-width: 592px) {
    .mdc-dialog .mdc-dialog__surface { max-width: 560px; }
}

在MatBlazor删除最大宽度并设置宽度值之后，您应该可以使用自己的css文件覆盖该文件。如果要占总屏幕的百分比，则还需要将容器的宽度设置为100％。

.mdc-dialog .mdc-dialog__container { width: 100%;}
.mdc-dialog .mdc-dialog__surface {
    max-width: none;
    width: 70%;
}

Answer 2

我发现覆盖.mdc-dialog__surface导致@ bind-IsOpen的行为混乱，并且导致对话框始终作为空白容器打开？我选择对实际字段应用单独的样式以使其更宽，因为我的问题是默认文本字段的大小小于其内容且不会自动重新设置大小。

MatDialog：无论内容大小如何，都可以控制整体大小

2 个答案: