css - Angular2マテリアルダイアログCSS、ダイアログサイズ

Question

Angular2 マテリアルチームは最近 MDDialog をリリースしましたhttps://github.com/angular/material2/blob/master/src/lib/dialog/README.md

angular2 マテリアルのダイアログのルックアンドフィールを変更したいと思います。たとえば、ポップアップコンテナの固定サイズを変更してスクロール可能にするには、背景色などを変更します。そうするための最良の方法は何ですか？私が遊ぶことができるcssはありますか？

score 61 · Accepted Answer

のコンテンツmd-dialog-contentは自動的にスクロール可能です。

への呼び出しでサイズを手動で設定できますMdDialog.open

let dialogRef = dialog.open(MyComponent, {
  height: '400px',
  width: '600px',
});

スクロールとサイズ変更の詳細なドキュメント/例: https://material.angular.io/components/dialog/overview

一部の色は、テーマによって決定する必要があります。テーマドキュメントについては、こちらを参照してください: https://material.angular.io/guide/theming

色などをオーバーライドしたい場合は、適切な css を追加するだけの Elmer の手法を使用してください。

<!DOCTYPE html>ダイアログのサイズがコンテンツに正しく収まるようにするには、ページにHTML 5 が必要であることに注意してください( https://github.com/angular/material2/issues/2351 )

score 1 · Accepted Answer

ラップトップのような小さな画面では、ダイアログが縮小されます。自動修正するには、次のオプションを試してください

answericouldntfindanywhereelse (2 番目のパラグラフ) の解決策に感謝します。それは私のために働いた。

以下が必要です

import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'

11 に答える 11