我想要下面对话框右上角的对齐按钮是我的html
<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 [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>
<a href="https://stackblitz.com/edit/angular-ksmixt?file=app/dialog-overview-example-dialog.html">demo</a>
最佳答案
您可以使用 align
HTML 属性:
<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 align="end">
<button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>
注意:设置 align="end"
属性对对话框的操作容器起作用的原因是因为 align
属性用于向对话框添加 flexbox 属性对话框组件的主题 SCSS 文件中的操作:
(dialog.scss
的摘录)
.mat-dialog-actions {
// ...
&[align='end'] {
justify-content: flex-end;
}
&[align='center'] {
justify-content: center;
}
}
这是 source code .
关于angular - 如何在对话框 Angular Material 内对齐按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49420069/