typescript 如何在 Angular 中定位 Position MatSnackBar 模块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51937261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I position Position MatSnackBar module in Angular?
提问by helloworld
I am trying to position the MatSnackbarmodule to appear at the top of my page.
我试图将MatSnackbar模块放置在我的页面顶部。
I have tried using the configto add customclass. Here is my code:
我曾尝试使用config添加customclass. 这是我的代码：
component.ts
组件.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
.css
.red-snackbar{
position: absolute !important;
top: 54px;
}
But it is not working. Is it possible to re-position the MatSnackbar?
但它不起作用。是否可以重新定位 MatSnackbar？
回答by kboul
You can determine the verticalPosition: MatSnackBarVerticalPositionas specified by the docs
您可以确定文档中verticalPosition: MatSnackBarVerticalPosition指定的
ts:
ts：
openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 2000,
// here specify the position
verticalPosition: 'top'
});
}
回答by Igor Simic
To position the snackbar use position values
定位小吃店使用位置值
this.snackBar.open(message.text, action, {
duration: this.timeOut,
verticalPosition: 'bottom', // 'top' | 'bottom'
horizontalPosition: 'end', //'start' | 'center' | 'end' | 'left' | 'right'
panelClass: ['red-snackbar'],
});
and to change color, in your style.css define the red-snackbar:
并改变颜色，在你的 style.css 中定义 red-snackbar：
.red-snackbar{
background-color: rgb(153, 50, 50);
color:lightgoldenrodyellow;
}
https://www.coditty.com/code/angular-material-display-multiple-snackbars-messages-in-sequence
https://www.coditty.com/code/angular-material-display-multiple-snackbars-messages-in-sequence
回答by John Hanna
This should work:
这应该有效：
.mat-snack-bar-container {
margin-top: 50px !important;
}
