无按钮角材质基本小吃吧

Posted 2023-02-23

【中文标题】无按钮角材质基本小吃吧

【英文标题】：Angular material basic snackbar without button

【发布时间】：2018-11-16 00:36:55

【问题描述】：

所以 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

【参考方案1】：

试试这个。

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

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

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

CSS 类。

.test .mat-simple-snackbarjustify-content: center;

【讨论】：

这样做的问题是您无法将文本置于中心，它仍然为按钮保留空间。你如何应用 text-align: center 这个？

您需要使用 panelClass 而不是 extraClasses。但是现在这并不能解决问题。创建 .testtext-align:center 不起作用嘿

我们走了，非常感谢你！ :) 只需将您的 extraClasses 更改为 panelClass。 extraClasses 早就被弃用了，根本不起作用。至少不在 stackblitz 上

【参考方案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;