如何在Angular中定位Position MatSnackBar模块?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (409)

我试图将MatSnackbar模块定位在页面顶部。

我试过用它config去添加customclass。这是我的代码:

component.ts

let config = new MatSnackBarConfig();
config.duration = 50000;
config.panelClass = ['red-snackbar']
this.snackBar.open("Please fill all the details before proceeding.", null, config);

.css

.red-snackbar{
    position: absolute !important;
    top: 54px;
}

但它没有用。是否可以重新定位MatSnackbar?

提问于
用户回答回答于

可以确定文档(https://material.angular.io/components/snack-bar/api#MatSnackBarConfig)指定verticalPosition: MatSnackBarVerticalPosition

ts:

openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
      // here specify the position
      verticalPosition: 'top'
    });
 }

演示:https://stackblitz.com/edit/angular-yer8ju

扫码关注云+社区

领取腾讯云代金券