我使用 Material 2 创建了 Snackbar(下面我添加了演示)。我在主页中有一个按钮,当我单击该按钮时,它会在页面底部显示消息(snackbar)。我想将其(快捷栏消息)更改为页面的右上角。我怎样才能做到这一点 ??需要帮助
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,
});
}
}
最佳答案
另一种方法是指定 MatSnackBarConfig
的 verticalPosition
和 horizontalPosition
配置选项,该选项通过
参数。MatSnackBar#open
中的 config
这是一个例子:
openSnackBar(message: string, action?: string) {
this.snackbar.open(message, action ? action : undefined, {verticalPosition: 'top', horizontalPosition: 'end'});
}
来自docs ,verticalPosition
只允许使用两个值:'top'
和 'bottom'
。
对于horizontalPosition
、'start'
、'center'
、'end'
、'左'
和'右'
。
这是一个 updated demo
关于angular - 如何对齐 Snackbar?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48495631/