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

Demo

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

像这样？见下文。

谢谢

Answer 1

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

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

Answer 2

我只是使用检查器工具玩耍，这可以通过以下方法实现：

.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 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材质”对话框

4 个答案: