首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Angular中定位MatSnackBar模块?

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

Stack Overflow用户
提问于 2018-08-21 03:22:47
回答 5查看 29.8K关注 0票数 16

我正在尝试定位MatSnackbar模块,使其显示在页面顶部。

我已经尝试使用config添加customclass。下面是我的代码:

component.ts

代码语言:javascript
复制
let config = new MatSnackBarConfig();
config.duration = 50000;
config.panelClass = ['red-snackbar']
this.snackBar.open("Please fill all the details before proceeding.", null, config);

.css

代码语言:javascript
复制
.red-snackbar{
    position: absolute !important;
    top: 54px;
}

但它不起作用。是否可以重新定位MatSnackbar?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2018-08-21 04:24:32

您可以确定由docs指定的verticalPosition: MatSnackBarVerticalPosition

ts:

代码语言:javascript
复制
openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
      // here specify the position
      verticalPosition: 'top'
    });
}

Demo

票数 44
EN

Stack Overflow用户

发布于 2020-01-10 15:48:56

要定位快捷栏,请使用位置值

代码语言:javascript
复制
            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中定义红色快照栏:

代码语言:javascript
复制
 .red-snackbar{
  background-color: rgb(153, 50, 50);
  color:lightgoldenrodyellow;
}

https://www.coditty.com/code/angular-material-display-multiple-snackbars-messages-in-sequence

票数 8
EN

Stack Overflow用户

发布于 2020-09-26 12:40:53

对于任何想知道如何动态设置snackbar位置的人,这里有一个示例:

代码语言:javascript
复制
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:

代码语言:javascript
复制
import { MatSnackBarHorizontalPosition } from "@angular/material/snack-bar";
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51937261

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档