angular - 如何对齐 Snackbar？

Question

我使用 Material 2 创建了 Snackbar(下面我添加了演示)。我在主页中有一个按钮，当我单击该按钮时，它会在页面底部显示消息(snackbar)。我想将其(快捷栏消息)更改为页面的右上角。我怎样才能做到这一点 ？？需要帮助

Demo

HTML

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

组件.ts

export class SnackBarComponentExample {

  constructor(public snackBar: MatSnackBar) {}

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

        });
  }
}

Answer 1

另一种方法是指定 MatSnackBarConfig 的 verticalPosition 和 horizo​​ntalPosition 配置选项，该选项通过 MatSnackBar#open 中的 config 参数。

这是一个例子:

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

来自docs ，verticalPosition 只允许使用两个值:'top' 和 'bottom'。

对于horizo​​ntalPosition、'start'、'center'、'end'、'左'和'右'。

这是一个 updated demo