[英]angular material dialog is not responsive
我正在使用下面的Angular 材質對話框是我為打開對話框而編寫的代碼,其中我正在傳遞配置:
組件.ts
let dialogBoxSettings = {
height: '300px',
width: '500px',
disableClose: true,
hasBackdrop: true,
data: mission.config
};
const dialogRef = this.dialog.open(
DialogBoxComponent,
dialogBoxSettings
);
我已將寬度和高度傳遞給對話框,但是當我調整瀏覽器窗口的大小時,對話框會移動到窗口的左側。
對話框.component.ts:
import { Component, Inject, OnInit,HostListener } from "@angular/core";
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { Subscription } from "rxjs/Subscription";
declare let jQuery: any;
@Component({
selector: "dialog-box",
templateUrl: "./dialog-box.component.html",
styleUrls: ["./dialog-box.component.css"]
})
export class DialogBoxWidgetComponent implements OnInit {
title: string = "Title";
heading: string = "Heading";
type: string = "userInput;";
buttons: any;
public dialogConfig: any;
subscription: Subscription;
constructor(
public dialogRef: MatDialogRef<DialogBoxWidgetComponent>,
@Inject(MAT_DIALOG_DATA) private data: any
) {}
closeDialog() {
jQuery(".close").trigger("click");
}
ngOnInit() {
this.dialogConfig = this.data;
this.title = this.dialogConfig.title;
this.heading = this.dialogConfig.heading;
this.type = this.dialogConfig.type;
this.buttons = this.dialogConfig.buttons;
jQuery(".cdk-overlay-container").css("z-index", 99999);
jQuery(".mat-dialog-container").css({
"border-radius": "7px"
});
}
}
對話框.component.html
<h1 matDialogTitle>{{title}}</h1>
<div (click)="closeDialog()" style="position: relative;">
<button class="close" mat-dialog-close></button>
</div>
<div mat-dialog-content>{{heading}}</div>
<div mat-dialog-actions *ngIf="type == 'userInput'">
<button *ngFor="let item of buttons" [ngClass]="item.type=='button'?'mat-dialog-btn':'mat-dilalog-btn-link'" mat-button matDialogClose="{{item.value}}">{{item.name}}</button>
</div>
我的實施有什么問題? 如果我不給對話框寬度和高度,那么當我調整窗口大小時它會調整得很好。
為了實現響應性,我們可以在 MatDialogconfig 中使用 panelClass
以全局樣式添加以下內容
.dialog-responsive {
width: 40%;
}
@media only screen and (max-width: 760px) {
.dialog-responsive {
width: 100%;
}
}
並將此類包含在您要打開對話框的配置中
let config: MatDialogConfig = {
panelClass: "dialog-responsive"
}
let dialogRef = this.dialog.open(InviteStudentComponent, config);
您可以嘗試添加margin: 0 auto;
到您的對話框設置:
let dialogBoxSettings = {
height: '300px',
width: '500px',
margin: '0 auto',
disableClose: true,
hasBackdrop: true,
data: mission.config
};
我在我的情況下使用了低效用類(順風),這是我找到的解決方案:
let dialogRef = this.dialog.open(LiveEventModalComponent, {
panelClass: ['md:w-3/5', 'w-full'],
maxHeight: '85vh',
data: {},
});
只需在全局樣式文件中應用 CSS 媒體查詢:
mat-dialog-container{
max-width: 50%;
margin: auto;
}
@media (max-width: 500px){
mat-dialog-container{
max-width: 80vw;
}
}
我使用 paneClass 並在 styles.scss 中設置我的自定義樣式。 請記住,您必須在 mat-dialog 中設置 maxWidth 屬性,因為當您不設置 maxWidth 時,它使用默認值,而您的 maxWidth 為 80vw。
const dialogRef = this.dialog.open(ErrorDialogComponent, {
maxWidth: '500px',
data: { errorText: message },
panelClass: 'full-with-dialog',
});
在styles.scss 中:
.full-with-dialog {
position: relative;
overflow: auto;
width: 500px;
@media (max-width: 568px) {
width: 440px;
}
@media (max-width: 468px) {
width: 340px;
}
@media (max-width: 368px) {
width: 300px;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.