css 我如何调整Snackbar？

a9wyjsp7 于 2022-12-24 发布在其他

关注(0)|答案(4)|浏览(134)

我创建了小吃条使用材料2（下面我添加了演示）。我有一个按钮在主页上，当我点击该按钮，它显示消息（小吃条）在页面底部。我想改变这个（小吃条消息）到页面的右上角。我怎么能做到这一点？？需要帮助
Demo
超文本标记语言

<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,

        });
  }
}

css

来源：https://stackoverflow.com/questions/48495631/how-can-i-align-snackbar

4条答案

按热度按时间

ajsxfq5m1#

另一种方法是指定MatSnackBarConfig的verticalPosition和horizontalPosition配置选项，该选项通过MatSnackBar#open中的config参数传递。
下面是一个例子：

openSnackBar(message: string, action?: string) {
    this.snackbar.open(message, action ? action : undefined, {verticalPosition: 'top', horizontalPosition: 'end'});
}

根据文档，verticalPosition仅允许两个值：'top'和'bottom'。
适用于一米八寸、一米九寸、一米十寸、一米十一寸、一米十二寸和一米十三寸。
这是一个updated demo

赞(0）回复(0）举报 2022-12-24

50pmv0ei2#

这里是一些更新的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

赞(0）回复(0）举报 2022-12-24

nnsrf1az3#

试试这个：

export class SnackBarComponentExample {

  constructor(public snackBar: MatSnackBar) {}

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

对我很有效。

赞(0）回复(0）举报 2022-12-24

4si2a6ki4#

要在左上角添加snackbar，请在globalstyles.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
}

赞(0）回复(0）举报 2022-12-24

我来回答

css 我如何调整Snackbar？

4条答案

相关问题

热门标签

最新问答