我怎么能对齐Snackbar？

Question

我使用材料2创建了Snackbar(下面我添加了演示).当我点击该按钮时,我在主页面中有一个按钮,它在页面底部显示消息(小吃栏).我想将此(小吃栏消息)更改为页面的右上角.我怎样才能做到这一点 ？？需要帮忙

演示

HTML

<button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Pizza party
</button>

component.ts

export class SnackBarComponentExample {

  constructor(public snackBar: MatSnackBar) {}

  openSnackBar(message="DOne", action = '') {
          this.snackBar.open(message, action, {
          duration: 5000,

        });
  }
}

Answer 1

另一种方法是通过指定verticalPosition和horizontalPosition配置选项MatSnackBarConfig (不需要任何hacky CSS):

openSnackBar(message: string, action?: string) {
    this.snackbar.open(message, action ? action : undefined, {verticalPosition: 'top', horizontalPosition: 'end'});
}

从文档中,只config允许两个值:MatSnackBar#open和verticalPosition.

对于'top','bottom',horizontalPosition,'start','center'和'end'.

这是一个更新的演示