如何在角度材质中添加占据对话框整个宽度的标题

Question

我是使用Angular材料的新手。我希望在模态对话框中占据整个宽度的标题。是否有任何属性由角度材料提供，我可以实现以下功能。

我想拥有什么

我得到了什么

这是stackblitz链接

https://stackblitz.com/edit/matdialog-directives-demo-nl9bkr?file=app%2Ffile-name-dialog.component.ts

Answer 1

您必须将元素mat-dialog-container元素作为对象的一部分并删除其填充。

类似的东西：

＆＃13;

＆＃13;

mat-dialog-container.mat-dialog-container {
  padding:0;
}

＆＃13;

＆＃13;

＆＃13;

请注意，我习惯使用标签选择器和类选择器来使选择器的特定性更高。

Answer 2

我找到了解决方案。我将mat-toolbar更改为h4并进行了自定义样式。这是更新的stackblitz链接，您可以在其中找到解决方案。

这是模板文件

<h4 color="primary" class="dialog-headline">AddFile</h4>
    <mat-dialog-content>
      Content goes here
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button>Add</button>
      <button mat-button>Cancel</button>
    </mat-dialog-actions>

这是自定义css

.dialog-headline{
  font-weight: 500;
  margin-top: -1em;
  margin-left: -1em;
  margin-right: -1em;
  margin-bottom: 0;
  padding: 1em;
  text-align: center;
  font-size: 1.5em;
  background-color: dodgerblue;
  color:white;
}

结果

您可以在以下链接中找到实时演示

https://stackblitz.com/edit/matdialog-directives-demo-nl9bkr?file=app%2Ffile-name-dialog.component.ts