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

Question

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

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

代码如下。

<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 代码网址

演示

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

像这样的东西？见下文。

谢谢

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;
}

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

Answer 2

使用作为材料一部分的内置工具栏。

<h4 mat-dialog-title>
        <mat-toolbar role="toolbar" class="task-header">
            <span> Dialog Title</span>
            <span class="fx-spacer"></span>
            <button mat-icon-button (click)="close()">
                <mat-icon mat-list-icon>close</mat-icon>
            </button>
        </mat-toolbar>
</h4>
<div mat-dialog-content>
  Modal Content here
</div>

标题的自定义 CSS

.task-header {
    background-color: transparent;
    padding: 0 5px;
     height: 20px;
}
.fx-spacer {
    flex: 1 1 auto;
}