web-dev-qa-db-fra.com

Angular2 Material Dialog css, taille du dialogue

L'équipe matérielle Angular2 a récemment publié le MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

J'aimerais changer l'apparence du dialogue du matériau angular2. Par exemple, pour modifier la taille fixe du conteneur contextuel et le faire défiler, modifiez la couleur d'arrière-plan, etc. Quelle est la meilleure façon de le faire? Est-ce qu'il y a un css avec lequel je peux jouer?

cssangularangular-materialangular-material2
14
ethan

Vous pouvez inspecter l'élément de dialogue avec les outils de développement et voir quelles classes sont appliquées sur mdDialog. 

Par exemple, .md-dialog-container est la classe principale du MDDialog et possède un remplissage: 24px

vous pouvez créer un CSS personnalisé pour écraser tout ce que vous voulez

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

A mon avis, ce n’est pas une bonne option et va probablement à l’encontre du guide Material, mais comme il n’a pas toutes les fonctionnalités de la version précédente, vous devriez faire ce que vous pensez être le meilleur pour vous.

5
Elmer Dantas

Le contenu dans md-dialog-content est automatiquement défilable.

Vous pouvez définir manuellement la taille dans l'appel à MdDialog.open

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

Documentation complémentaire/exemples de défilement et de dimensionnement: https://material.angular.io/components/dialog/overview

Certaines couleurs doivent être déterminées par votre thème. Voir ici pour la documentation: https://material.angular.io/guide/theming

Si vous souhaitez remplacer les couleurs, utilisez la technique d’Elmer qui consiste à n’ajouter que le css approprié.

Notez que vous devez avoir le HTML 5 <!DOCTYPE html> sur votre page pour que la taille de votre boîte de dialogue s’adapte correctement au contenu ( https://github.com/angular/material2/issues/2351 )

27
Alexander Taylor

Nous pouvons utiliser deux méthodes pour modifier la taille de votre composant MdDialog dans un matériau angulaire. 

1) Depuis un composant extérieur Composant de la boîte de dialogue appelante

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) À partir du composant de dialogue intérieur. changer dynamiquement sa taille

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

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

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

utilisez updateSize () dans n’importe quelle fonction du composant dialog. la taille de la boîte de dialogue changera automatiquement.

pour plus d'informations, consultez ce lien https://material.angular.io/components/component/dialog

22
Amit kumar

Pour la version la plus récente de Angular en date de ce billet, il semble que vous deviez d'abord créer un objet MatDialogConfig et le transmettre comme second paramètre à dialog.open () car TypeScript s'attend à ce que le second paramètre soit de type MatDialogConfig.

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

Je pense que vous devez utiliser /deep/, car votre CSS peut ne pas voir votre classe modale. Par exemple, si vous souhaitez personnaliser .modal-dialog

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

Mais ce code modifiera toutes vos fenêtres modales, meilleure solution sera 

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

partage des dernières informations sur le dialogue de Mat Deux manières d'y parvenir ... 1) soit vous réglez la largeur et la hauteur lors de l'ouverture Par exemple. 

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

ou 2) utilisez la classe panelClass et modifiez-la en conséquence.

1) est plus facile mais 2) est mieux et plus configurable.

0
erickyi2006

Cela a fonctionné pour moi:

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