web-dev-qa-db-ja.com

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

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

Angle2マテリアルのダイアログの見た目と雰囲気を変更したいと思います。たとえば、ポップアップコンテナの固定サイズを変更してスクロール可能にするには、背景色を変更します。そうするための最良の方法は何ですか？一緒に遊ぶことができるCSSはありますか？

cssangularangular-materialangular-material2
14
ethan

開発ツールを使用してダイアログ要素を調べ、mdDialogで適用されているクラスを確認できます。

例えば、 .md-dialog-containerはMDDialogのメインクラスであり、パディングがあります：24px

必要なものを上書きするカスタムCSSを作成できます

.md-dialog-container { background-color: #000; width: 250px; height: 250px }

私の意見では、これは良い選択肢ではなく、おそらくマテリアルガイドに反しますが、以前のバージョンにあるすべての機能を備えていないため、自分にとって最適だと思うことを行うべきです。

5
Elmer Dantas

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の手法を使用してください。

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

27
Alexander Taylor

angular materialでMdDialogコンポーネントのサイズを変更するために使用できる2つの方法があります

1）ダイアログコンポーネントを呼び出す外部コンポーネントから

import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';


dialogRef: MdDialogRef <any> ;

constructor(public dialog: MdDialog) { }

openDialog() {
        this.dialogRef = this.dialog.open(TestTemplateComponent, {
            height: '40%',
            width: '60%'
        });
        this.dialogRef.afterClosed().subscribe(result => {
            this.dialogRef = null;
        });
    }

2）Inside Dialogコンポーネントから。サイズを動的に変更する

import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';

constructor(public dialogRef: MdDialogRef<any>) { }

 ngOnInit() {
        this.dialogRef.updateSize('80%', '80%');
    }

ダイアログコンポーネントの任意の関数でupdateSize（）を使用します。ダイアログのサイズが自動的に変更されます。

詳細については、このリンクを確認してください https://material.angular.io/components/component/dialog

22
Amit kumar

現在のバージョンのAngular Material（6.4.7）では、カスタムクラスを使用できます。

let dialogRef = dialog.open(UserProfileComponent, {
  panelClass: 'my-class'
});

次に、クラスをグローバルな場所に配置します（この機能を他の場所で動作させることができませんでした）。 styles.css：

.my-class .mat-dialog-container{
  height: 400px;
  width: 600px;
  border-radius: 10px;
  background: lightcyan;
  color: #039be5;
}

できた！

5
Kostas Siabanis

この投稿のAngularの最新バージョンでは、TypeScriptは2番目のパラメータをMatDialogConfigタイプです。

const matDialogConfig = new MatDialogConfig();
matDialogConfig.width = "600px";
matDialogConfig.height = "480px";
this.dialog.open(MyDialogComponent, matDialogConfig);
3
Adam Prax

CSSではモーダルクラスが表示されない可能性があるため、/deep/を使用する必要があると思います。たとえば、.modal-dialogをカスタマイズする場合

/deep/.modal-dialog {
  width: 75% !important;
}

しかし、このコードはすべてのモーダルウィンドウを変更します。より良い解決策は

:Host {
  /deep/.modal-dialog {
  width: 75% !important;
  }
}
3
Volodymyr Khmil

マットダイアログの最新情報を共有するには、これを達成する2つの方法があります。

    let dialogRef = dialog.open(NwasNtdSelectorComponent, {
        data: {
            title: "NWAS NTD"
        },
        width: '600px',
        height: '600px',
        panelClass: 'epsSelectorPanel'
    });

または2）panelClassを使用し、それに応じてスタイルを設定します。

1）最も簡単ですが、2）より良く、より設定可能です。

0
erickyi2006

これは私のために働いた：

dialogRef.updateSize("300px", "300px");
0
Gerhardengel