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

Question

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

我打算在对话框顶部显示黑色条带，它应该触及上述两个角。但问题是如果我添加任何 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 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;
}

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

Answer 2

使用属于 material 的内置工具栏。

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

为 header

自定义 CSS

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

Answer 3

您可以使用下面的代码。这只是一个黑客。 Angular 本身没有直接支持。

<div>
  <mat-toolbar color="primary">
    <span>Edit User</span>
  </mat-toolbar>

  <div style="height: calc(80vh - 160px); overflow: auto; padding: 16px;">
    <!-- this 80vh height, you also need to pass in object when invoking the dialog from .ts-->
    <!--You body will go here-->
  </div>
  <mat-toolbar fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="16px" style="padding: 16px;">
    <button mat-button (click)="something()">Cancel</button>
    <button mat-raised-button (click)="something()" color="primary">Update</button>
  </mat-toolbar>
</div>

Answer 4

根据 Angular Material 文档，您可以在要固定到顶部的区域上使用此指令：

MatDialogTitle

Title of a dialog element. Stays fixed to the top of the dialog when scrolling.

Selector: [mat-dialog-title] [matDialogTitle]

Exported as: matDialogTitle

https://material.angular.io/components/dialog/api

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

Angular 5 Material Dialog box with header strip on top

angular-material2

angular