4

使用 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。

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

4

2 回答 2

6

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

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

您应该能够使用您自己的 css 文件覆盖它，该文件在 MatBlazor 删除最大宽度并设置宽度值后加载。如果您想占总屏幕的百分比，您还需要将容器设置为 100% 宽度。

.mdc-dialog .mdc-dialog__container { width: 100%;}
.mdc-dialog .mdc-dialog__surface {
    max-width: none;
    width: 70%;
}
于 2019-10-10T20:12:34.480 回答
0

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

于 2020-09-27T18:06:41.060 回答