顶部带有标题条的 Angular 5 Material 对话框

Question

添加 Angular Materail 对话框后，默认情况下它会出现没有任何边框或任何带有顶部 strip 的关闭按钮的普通对话框。但在这里我试图在对话框顶部添加 strip ，如下图所示。



我打算在对话框顶部显示黑色 strip ，该黑色 strip 应触及上述 2 个 Angular 。但问题是如果我添加任何 div 那么我认为这不是一个好的解决方案。目前是否有任何可用的 Angular Material 功能。所以为此我在它上面添加了 div。但我认为这不是一个可行的解决方案。我必须在多个对话框中添加这些 strip 。那么有人可以帮助我吗？

代码如下。

<div style="background-color: black; height:30px; width: auto"></div>
<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>

Stackblitz Code url

Demo

有人可以建议我如何实现这一目标吗？

像这样的东西？见下文。


谢谢

Answer 1

我只是使用 Inspector Tool 玩了一下，这可以使用这个来实现:

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

dialog-overview-example-dialog.ng-star-inserted > div {
    margin-right: -24px;
    margin-left: -24px;
}

.mat-dialog-actions {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mat-dialog-title {
  margin-top: 15px !important;
}

注意:我没有寻找框架本身提供的任何解决方案。