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

“角度材质”对话框“材质”对话框“动作位置”

angular-components modal-dialog angular-material angular

user2010955 · 技术社区 · 6 年前

我在用 Angular Material Dialog component ,使用mat dialog内容和mat dialog动作显示带有动作按钮的页脚。

如果我设置了一个对话框的高度(例如80%),对话框的动作会比默认值高出很多。

Here is a forked stackblitz of an official example

我刚设定了高度:80%

const dialogRef = this.dialog.open(DialogContentExampleDialog, {
  height: '80%',
  width: '520px'
});

结果如下:

在我看来,这是一个问题:)但你的看法是什么?有没有可能轻松修复它?

0 回复 | 直到 6 年前

RockResolve 6 年前

Github跟踪此问题 https://github.com/angular/components/issues/4609

包含DanielHabenicht的清洁修复(无魔法数字) https://github.com/angular/components/issues/4609#issuecomment-528865962

// app.module.ts
import {MAT_DIALOG_DEFAULT_OPTIONS} from '@angular/material';
...
providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {panelClass: 'mat-dialog-override'}}
]
...


// overrides.scss or styles.scss
// This fixes https://github.com//issues/4609
.mat-dialog-override {
  height: 0px;
  mat-dialog-container {
    > :first-child {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    mat-dialog-content,
    div[mat-dialog-content] {
      flex-grow: 1;
      max-height: unset;
    }
  }
}

JuNe 6 年前

你可以“伸展”你的身体 mat-dialog-content .

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content style="height: calc(100% - 96px);">     <-- height of dialog minus title and actions height
  <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>

Michael Prüfer 4 年前

对我来说:

.mat-dialog-override {
  mat-dialog-container {
    display: flex;
    flex-direction: column;

    mat-dialog-actions {
      margin-top: auto;
    }
  }
}

Torsten Barthel 6 年前

@JuNe的解决方案非常有效,而且完全响应。我唯一需要补充的是,我需要做一些小调整来让它正常工作。我必须明确设置 mat对话框内容 要取消设置:

style="height: calc(100% - 96px);max-height: unset"

Breno Gomes 5 年前

你定好了 mat-dialog-actions 具有 style="position: relative; top: 5rem;" 例如价值 top 可以根据你的身高而变化。

Kristina 5 年前

<div mat-dialog-actions style="box-sizing: border-box"> 为我工作!

Mathias Müller 4 年前

因为我们将标题、内容和动作包装在一个表单中,这将以项目的最小高度解决粘性页脚问题:

应用程序。单元ts

import {MAT_DIALOG_DEFAULT_OPTIONS} from '@angular/material';
...
providers: [{
  provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {
    panelClass: 'mat-dialog-override',
    hasBackdrop: true, // enable Backdrop
    disableClose: true // disable click and escape for closing
  }
}]
...

html:

<ng-template #dialog>
  <form>
    <div mat-dialog-title>Title</div>
    <div mat-dialog-content>...</div>
    <div mat-dialog-actions>...</div>        
  </form>
</ng-template>

scss:

.mat-dialog-override {
  mat-dialog-container {
    display: flex;
    flex-direction: column;

    > :first-child {
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    [mat-dialog-content] {
      flex-grow: 1;
      max-height: unset;
    }
  }
}

我们使用material属性来标记html元素。