web-dev-qa-db-ja.com

AngularでPosition MatSnackBarモジュールを配置するにはどうすればよいですか？

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の位置を変更することは可能ですか？

angulartypescriptangular-material
7
helloworld

docs で指定されているverticalPosition: MatSnackBarVerticalPositionを決定できます

ts：

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

デモ

23
kboul