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

デフォルトでは、サーフェス ダイアログは最大幅 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%;
}
于 2019-10-10T20:12:34.480 に答える