[英]Angular custom style to mat-dialog
我正在嘗試在 Angular 中自定義默認的“mat-dialog” 5. 我想要實現的是在對話框的上部有一個工具欄,它應該覆蓋整個寬度。 但是,mat-dialog-container 有一個固定的 24px 填充,我無法覆蓋它。 我嘗試為 h1 和 mat-dialog-container 設計樣式。
@Component({
selector: 'error-dialog',
template:
` <h1 mat-dialog-title> ERRORE </h1>
<div mat-dialog-content>
{{data.error}}
</div>
<div mat-dialog-actions>
<button mat-button (click)="onClick()">Ok</button>
</div>`,
styles: [
'h1 { background: #E60000; color: white; }',
// 'myDialogStyle .mat-dialog-container { padding: 1px !important;}'
]})
export class ErrorDialog {
constructor(
public dialogRef: MatDialogRef<ErrorDialog>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
onClick(): void {
this.dialogRef.close();
}
}
openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
width: '80%',
data: { error: errore }
//panelClass: 'myDialogStyle'
});
}
您可以在 matDialogConfig 對象中傳遞自定義 panelClass( 此處為文檔)
所以
openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
width: '80%',
data: { error: errore }
panelClass: 'custom-modalbox'
});
}
在您的自定義 panelClass 中,您可以覆蓋填充:
.custom-modalbox {
mat-dialog-container {
padding: 0;
}
}
但是您的 .custom-modalbox 應該是全局范圍的(未在組件樣式中定義)
這肯定會奏效:
::ng-deep.mat-dialog-container {
padding: 0px !important;
}
您應該在組件上使用 panelClass,同時在 css 上使用 ::ng-deep。
openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
width: '80%',
data: { error: errore }
panelClass: 'custom-modalbox'
});
}
在 CSS 中:
::ng-deep .custom-modalbox {
mat-dialog-container {
padding: 0;
}
}
我只是改變這個,它完美地工作:
.custom-modalbox > mat-dialog-container {
padding: 0px;
}
這里有一個工作示例: https ://stackblitz.com/edit/custom-dialog?file=src/styles.css
當您的樣式是全局范圍時,panelClass 可以完美地工作,否則它不會因為樣式不可用。
在您的樣式之前添加 ng-deep 以全局訪問它!
::ng-deep {
.custom-dialog > mat-dialog-container {
padding: 0px;
}
}
解決方案的最佳方法是僅在一個地方更改代碼。 這可以使用以下代碼來完成:
::ng-deep.mat-dialog-container {
overflow: visible;
}
這有助於您僅在一個地方更改代碼,而不是在所有地方更改。 這完美地工作。 除了相應的 CSS 文件之外,無需在任何地方聲明任何其他內容。
它在 Angular 13 中對我有用
在 style.css 中
::ng-deep #dialogTrasparent{
padding: 0px !important;
box-shadow: none !important;
background: transparent !important;
}
和組件.ts
const loader = this.dialog.open(DialogLoader,
{id: 'dialogTrasparent'});
在全局文件中定義 CSS,我們可以使用 Mat Dialog API 添加 css
例子
constructor(private dialogRef: MatDialogRef<MetricCreateComponent>) { }
ngOnInit(): void {
this.dialogRef.addPanelClass('custom-dialog-container-metric-configure');
}
onRemoveClick(): void {
this.dialogRef.removePanelClass('custom-dialog-container-metric-configure');
}
您需要構建自己的自定義 class 並在對話框屬性 panelClass 中進行設置。
openDialog(): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
data: this.data,
panelClass: 'my-custom-container'
});
}
在您的 styles.css/styles.scss 中,您寫下您的自定義規則。 然后你說你想設置 mat-dialog-title 的樣式,為了做到這一點,我使用了瀏覽器檢查器並搜索了一個 class 名稱作為目標(以查看實際的 class 名稱 angular 將其賦予了 html 元素)。 我發現該名稱為“mat-mdc-dialog-title”,並在我的規則中使用了它。
.my-custom-container {
background-color: aqua;
}
/* Increasing css specificity by duplicating class */
/* Increasing the specificity is important to overwrite angular
own rules on the component, without it your rules do not win
against angular material dialog's rules.
*/
.my-custom-container .mat-mdc-dialog-title.mat-mdc-dialog-title {
color: blue;
}
您的對話框的 html 應如下所示:
<section class="my-custom-container">
<h1 mat-dialog-title>Delete file</h1>
<div mat-dialog-content>
Would you like to delete cat.jpeg?
</div>
<div mat-dialog-actions>
<button mat-button mat-button color="accent" mat-dialog-close>No</button>
<button mat-button mat-raised-button color="primary" mat-dialog-close>Yes</button>
</div>
</section>
不幸的是,我們無法在mat-dialog
配置中設置所有需要的樣式。 MatDialogConfig允許您在配置中僅設置寬度、高度、最大/最小寬度、最大/最小高度和自定義類,以由它們對某些特定選項進行操作。 但您也可以在styles.scss
文件中為模式設置全局樣式。 *.ts
let dialogRef = this.matDialog.open(
SomeEntryComponent,
<MatDialogConfig>modalConfig // <- there you can set width/height
);
dialogRef.afterClosed().subscribe((result: any) => { /* do stuff */ });
全局樣式.scss
.cdk-overlay-pane mat-dialog-container.mat-dialog-container { // <- in this way all other styles
margin: 20px 5px;
padding: 30px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.