如何对齐Snackbar？

Question

我使用Matter2创建了Snackbar (下面我添加了演示)，当我单击主页上的按钮时，.I有一个按钮，它在页面底部显示消息(Snackbar)。我想将此(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

这是一些更新的CSS，这将帮助您显示小吃店在左上角。

要获得更多效果，请看一看这里

https://stackblitz.com/edit/angular-mbgkfv-amqfpy?file=styles.css

这里是您更新的stackblitz，它将在5s后重新加载页面。

https://stackblitz.com/edit/angular-mbgkfv-nc6bk6?file=app/snack-bar-component-example.ts

Answer 2

另一种方法是指定verticalPosition和horizontalPosition的MatSnackBarConfig配置选项，这些选项通过MatSnackBar#open中的config参数传递。

下面是一个例子：

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

在文档中，只允许verticalPosition的两个值：'top'和'bottom'。

horizontalPosition，'start'，'center'，'end'，'left'和'right'。

这是一个更新演示

Answer 3

试试这个：

export class SnackBarComponentExample {

  constructor(public snackBar: MatSnackBar) {}

  openSnackBar(message="DOne", action = '') {
          this.snackBar.open(message, action, {
          duration: 5000,
          verticalPosition: 'top',
          horizontalPosition:'right',
        });
  }
} 

对我起作用了。