Angular2 Material Dialog css, tamaño de diálogo

Investigamos por todo el mundo online para darte la solución para tu problema, en caso de dudas deja la inquietud y te contestaremos con gusto, porque estamos para ayudarte.

Solución:

Contenido en md-dialog-content es automáticamente desplazable.

Puede configurar manualmente el tamaño en la llamada para MdDialog.open

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

Más documentación / ejemplos para desplazamiento y dimensionamiento: https://material.angular.io/components/dialog/overview

Algunos colores deben ser determinados por su tema. Consulte aquí los documentos de temas: https://material.angular.io/guide/theming

Si desea anular los colores y demás, use la técnica de Elmer de simplemente agregar el css apropiado.

Tenga en cuenta que debe tener el HTML 5 en su página para que el tamaño de su diálogo se ajuste correctamente al contenido ( https://github.com/angular/material2/issues/2351 )

Hay dos formas que podemos usar para cambiar el tamaño de su componente MatDialog en material angular

1) Desde el componente externo Qué componente de diálogo de llamada

import  MatDialog, MatDialogConfig, MatDialogRef  from '@angular/material';


dialogRef: MatDialogRef  ;

constructor(public dialog: MatDialog)  

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

2) Desde el componente de diálogo interno. cambiar dinámicamente su tamaño

import  MatDialog, MatDialogConfig, MatDialogRef  from '@angular/material';

constructor(public dialogRef: MatDialogRef)  

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

use updateSize() en cualquier función en el componente de diálogo. cambiará el tamaño del diálogo automáticamente.

para obtener más información, consulte este enlace https://material.angular.io/components/component/dialog

Con la versión actual de Angular Material (6.4.7) puede usar una clase personalizada:

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

Ahora coloque su clase en algún lugar global (no he podido hacer que esto funcione en otro lugar), por ejemplo, en styles.css:

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

¡Hecho!

Si te ha resultado útil este post, nos gustaría que lo compartas con otros programadores así nos ayudas a extender nuestra información.

---

---

Utiliza Nuestro Buscador