Question

我使用材料2创建了Snackbar（下面我添加了演示）。当我点击页面底部显示消息（快餐栏）的按钮时，主页面中有一个按钮。我想将此（小吃栏消息）更改为页面的右上角。我怎样才能做到这一点？？需要帮助

HTML

<button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Pizza party
</button>

component.ts

export class SnackBarComponentExample {

  constructor(public snackBar: MatSnackBar) {}

  openSnackBar(message="DOne", action = '') {
          this.snackBar.open(message, action, {
          duration: 5000,

        });
  }
}

Answer 1

另一种方法是指定verticalPosition的{{1}}和horizontalPosition配置选项，这些选项通过MatSnackBarConfig中的config参数传递

以下是一个例子：

MatSnackBar#open

从docs开始，openSnackBar(message: string, action?: string) { this.snackbar.open(message, action ? action : undefined, {verticalPosition: 'top', horizontalPosition: 'end'}); }只允许使用两个值：verticalPosition和'top'。

适用于'bottom'，horizontalPosition，'start'，'center'，'end'和'left'。

这里是updated demo

Answer 2

这里有一些更新的CSS，它可以帮助你在左上角显示小吃店。

要获得更多效果，请查看here

https://stackblitz.com/edit/angular-mbgkfv-amqfpy?file=styles.css

这是您更新的stackblitz，它会在5秒后重新加载页面。

https://stackblitz.com/edit/angular-mbgkfv-nc6bk6?file=app/snack-bar-component-example.ts

Answer 3

尝试：

export class SnackBarComponentExample {

  constructor(public snackBar: MatSnackBar) {}

  openSnackBar(message="DOne", action = '') {
          this.snackBar.open(message, action, {
          duration: 5000,
          verticalPosition: 'top',
          horizontalPosition:'right',
        });
  }
}

对我有用。

Answer 4

要在左上角添加小吃栏，请在全局styles.css页面中添加以下样式

.cdk-global-overlay-wrapper {
  align-items: flex-start !important;
  justify-content: flex-start !important
}

右上角

.cdk-global-overlay-wrapper {
  align-items: flex-start !important;
  justify-content: flex-end !important
}

我怎么能对齐Snackbar？

4 个答案: