代码之家  ›  专栏  ›  技术社区  ›  Santhosh

如何从“角度材质”对话框中删除填充?

  •  0
  • Santhosh  · 技术社区  · 6 年前

    有关问题说明,请参阅下面的链接。

    https://github.com/angular/material2/issues/14388

    谢谢你的帮助

    .html代码

    <h1 mat-dialog-title>Hi {{data.name}}</h1>
    <div mat-dialog-content>
      <p>What's your favorite animal?</p>
      <mat-form-field>
        <input matInput [(ngModel)]="data.animal">
      </mat-form-field>
    </div>
    <div mat-dialog-actions>
      <button mat-button (click)="onNoClick()">No Thanks</button>
      <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
    </div>
    

    .ts代码

    import {Component, Inject} from '@angular/core';
    import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
    
    export interface DialogData {
      animal: string;
      name: string;
    }
    
    /**
     * @title Dialog Overview
     */
    @Component({
      selector: 'dialog-overview-example',
      templateUrl: 'dialog-overview-example.html',
      styleUrls: ['dialog-overview-example.css'],
    })
    export class DialogOverviewExample {
    
      animal: string;
      name: string;
    
      constructor(public dialog: MatDialog) {}
    
      openDialog(): void {
        const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
          width: '250px',
          data: {name: this.name, animal: this.animal}
        });
    
        dialogRef.afterClosed().subscribe(result => {
          console.log('The dialog was closed');
          this.animal = result;
        });
      }
    
    }
    
    @Component({
      selector: 'dialog-overview-example-dialog',
      templateUrl: 'dialog-overview-example-dialog.html',
    })
    export class DialogOverviewExampleDialog {
    
      constructor(
        public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
        @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
    
      onNoClick(): void {
        this.dialogRef.close();
      }
    
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   iLuvLogix    6 年前

    当您在您喜欢的浏览器的检查/开发工具中检查对话框时,您将看到内容被包装在一个具有类名的容器中 mat-dialog-container

    enter image description here

    试试你的css/SCS:

    .mat-dialog-container {
          padding:0px!important;
    }
    

    编辑

    你可以很容易地在stackblitz上复制这个 link 下面的截图显示没有填充:

    enter image description here

        2
  •  1
  •   nipun-kavishka    5 年前

    全局样式(src/样式.css)

    .mat-dialog-container {
    padding: 0 !important;
    }