如何在Angular中定位MatSnackBar模块？
如何在Angular中定位MatSnackBar模块？
提问于 2018-08-21 03:22:47
我正在尝试定位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？
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-08-21 04:24:32
Stack Overflow用户
发布于 2020-01-10 15:48:56
要定位快捷栏，请使用位置值
this.snackBar.open(message.text, action, {
duration: this.timeOut,
verticalPosition: 'bottom', // 'top' | 'bottom'
horizontalPosition: 'end', //'start' | 'center' | 'end' | 'left' | 'right'
panelClass: ['red-snackbar'],
});要更改颜色，请在style.css中定义红色快照栏：
.red-snackbar{
background-color: rgb(153, 50, 50);
color:lightgoldenrodyellow;
}https://www.coditty.com/code/angular-material-display-multiple-snackbars-messages-in-sequence
Stack Overflow用户
发布于 2020-09-26 12:40:53
对于任何想知道如何动态设置snackbar位置的人，这里有一个示例：
showSnackBar(text: string, duration = 2000, actionText = 'Fechar', horizontalPosition = 'center'): MatSnackBarRef<SimpleSnackBar> {
return this.snackBar.open(text, actionText, {
duration: duration,
// Cast the variable to MatSnackBarHorizontalPosition
horizontalPosition: horizontalPosition as MatSnackBarHorizontalPosition
});
}并从以下位置导入MatSnackBarHorizontalPosition：
import { MatSnackBarHorizontalPosition } from "@angular/material/snack-bar";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51937261
复制相关文章
相似问题
腾讯云开发者
