wake-up-neo.com

Angular2 Material Dialog CSS, Dialoggröße

Das Angular2-Materialteam hat kürzlich den MDDialog veröffentlicht https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

Ich möchte das Aussehen und den Eindruck des Dialogfelds von angle2 ändern. Wenn Sie beispielsweise die feste Größe des Popup-Containers ändern und scrollbar machen möchten, ändern Sie die Hintergrundfarbe usw. Was ist der beste Weg, dies zu tun? Gibt es eine CSS, mit der ich spielen kann?

cssangularangular-materialangular-material2
14
ethan

Sie können das Dialogelement mit Entwicklungswerkzeugen überprüfen und sehen, welche Klassen in mdDialog angewendet werden. 

Zum Beispiel ist .md-dialog-container die Hauptklasse des MDDialogs und hat Auffüllung: 24px

sie können ein benutzerdefiniertes CSS erstellen, um das zu überschreiben, was Sie möchten

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

Meiner Meinung nach ist dies keine gute Option und spricht wahrscheinlich gegen den Material Guide. Da er jedoch nicht alle Funktionen der vorherigen Version hat, sollten Sie das tun, was Sie für das Beste halten.

5
Elmer Dantas

Inhalte in md-dialog-content können automatisch gescrollt werden.

Sie können die Größe im Aufruf manuell auf MdDialog.open einstellen.

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

Weitere Dokumentation/Beispiele zum Scrollen und Größenanpassung: https://material.angular.io/components/dialog/overview

Einige Farben sollten von Ihrem Thema bestimmt werden. Hier finden Sie Themendokumente: https://material.angular.io/guide/theming

Wenn Sie Farben und dergleichen überschreiben möchten, verwenden Sie die Elmer-Technik, indem Sie einfach die entsprechende CSS hinzufügen.

Beachten Sie, dass Sie den HTML 5 <!DOCTYPE html> auf Ihrer Seite haben müssen, damit die Größe Ihres Dialogs korrekt an den Inhalt angepasst werden kann ( https://github.com/angular/material2/issues/2351 ).

27
Alexander Taylor

Es gibt zwei Möglichkeiten, wie Sie die Größe Ihrer MdDialog-Komponente in eckigem Material ändern können 

1) Von der externen Komponente welche Anrufdialogkomponente

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) Von innerhalb der Dialogkomponente. dynamisch seine Größe ändern

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

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

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

verwenden Sie updateSize () in einer beliebigen Funktion in der Dialogkomponente. Die Dialoggröße wird automatisch geändert.

weitere Informationen finden Sie unter diesem Link https://material.angular.io/components/component/dialog

22
Amit kumar

Mit der aktuellen Version von Angular Material (6.4.7) können Sie eine benutzerdefinierte Klasse verwenden:

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

Platzieren Sie Ihre Klasse jetzt an einem globalen Ort (ich konnte sie nicht an einem anderen Ort zum Laufen bringen), z. im styles.css:

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

Getan!

5
Kostas Siabanis

Für die neueste Version von Angular in diesem Beitrag scheint es, als müssten Sie zuerst ein MatDialogConfig-Objekt erstellen und als zweiten Parameter an dialog.open () übergeben, da TypeScript den zweiten Parameter vom Typ MatDialogConfig erwartet.

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

Ich denke, Sie müssen /deep/ verwenden, da Ihr CSS Ihre modale Klasse möglicherweise nicht sieht. Wenn Sie beispielsweise .modal-dialog anpassen möchten

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

Dieser Code wird jedoch alle Ihre Modal-Fenster ändern. Eine bessere Lösung wird es geben 

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

teilen des neuesten Mat-Dialogs Zwei Möglichkeiten, dies zu erreichen ... 1) Entweder Sie legen die Breite und Höhe während des Öffnens. 

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

oder 2) benutze die panelClass und stelle sie entsprechend ein.

1) ist am einfachsten, aber 2) ist besser und konfigurierbarer.

0
erickyi2006

Das hat für mich funktioniert:

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