Question

所以Angular Material有两种主要方式来调用SnackBar。一种方法是调用基本的默认SnackBar：

snackbar.open('Message archived', 'Undo', {
  duration: 3000
});

另一种方法是将组件称为SnackBar：

snackbar.openFromComponent(MessageArchivedComponent, {
  data: 'some data'
});

现在我的问题是，如何调用基本的（不使用组件）但没有'Undo'按钮。我可以这样做：

snackBar.open('Message archived');

但是，如何调整持续时间和所有其他属性？

https://material.angular.io/components/snack-bar/overview

Answer 1

试试这个。

snackbar.open('Message archived', '', {
  duration: 3000,
  extraClasses :['test']
});

为测试类添加样式，以便文本对齐。

如果extraClasses不起作用，请改用panelClass

CSS课程。

.test .mat-simple-snackbar{justify-content: center;}

Answer 2

更新2020

已接受的答案似乎不再正确。如果有人遇到相同的问题，这对我有用：

照常使用panelClass属性创建小吃店。

// xy.component.ts

this.snackBar.open('Message', '', {
    duration: 3000,
    panelClass: ['simple-snack-bar']
}

由于自定义CSS已应用到小吃店容器，因此您必须选择Angular Material小吃店类以覆盖样式。

/* 
styles.css - if you don't want to use ::ng-deep (what is not recomended),
then you are forced to put your styles in the global scope
*/

.simple-snack-bar .mat-simple-snackbar {
  justify-content: center;
}

Angular材料基本小吃吧没有按钮

2 个答案: