使用 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。控制对话框大小的正确方法是什么?
最佳答案
默认情况下,表面对话框会增长以适应最大宽度为 560 像素的内容。
@media (min-width: 592px) {
.mdc-dialog .mdc-dialog__surface { max-width: 560px; }
}
您应该能够使用自己的 css 文件覆盖它,该文件在 MatBlazor 删除 max-width 并设置宽度值后加载。如果您想占总屏幕的百分比,您还需要将容器设置为 100% 宽度。
.mdc-dialog .mdc-dialog__container { width: 100%;}
.mdc-dialog .mdc-dialog__surface {
max-width: none;
width: 70%;
}
关于c# - MatDialog : controlling overall size regardless of content size,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57517752/