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?
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.
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 ).
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
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!
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);
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;
}
}
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.
Das hat für mich funktioniert:
dialogRef.updateSize("300px", "300px");