Question

嘿，如何将SnackBar中的文本对齐为中心？

这是我的代码，它不起作用：

import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class MaterialService {

  constructor(public snackBar: MatSnackBar) { }

openSnackBar(message:string){

let config = new MatSnackBarConfig();
config.panelClass = 'text-align:center';

  this.snackBar.open(message);
}

}

谢谢：）

Answer 1

只需将其添加到您的style.css（或任何全局CSS中，就我而言，将其放入我的app.component.scss中）

margin：auto; 会将span标签居于快餐栏的中心

text-align：center; 会将文本居中显示在跨度内

simple-snack-bar span {
  margin:auto;
  text-align: center;
}

这样的设置将应用于您的所有SnackBar。

Answer 2

尝试

import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class MaterialService {
 horizontalPosition: MatSnackBarHorizontalPosition = 'center';
 verticalPosition: MatSnackBarVerticalPosition = 'top';

  constructor(public snackBar: MatSnackBar) { }

openSnackBar(message:string){

      let config = new MatSnackBarConfig();
      config.verticalPosition = this.verticalPosition;
      config.horizontalPosition = this.horizontalPosition;
      this.snackBar.open(message);
}

参考：https://material.angular.io/components/snack-bar/api

示例：https://stackblitz.com/edit/angular-snackbar

Answer 3

虽然这个问题已经很老了，但我认为发布我的解决方案可能对那里的人有所帮助。

经过大量研究和反复试验，我只需要下面的代码就可以让我的小吃店处理居中的文本。（提示：我使用的是目前最稳定的 Angular 版本）。

// extract from my-notification-service.ts file
// Note that I created the above service file, imported "MatSnackBar"
// & "MatSnackBarConfig" from @angular/material/snack-bar, 
// and added a property of type "MatSnackBar" into the constructor. 
// After that, I created the below object and function.
// The function will be called by any submit button in the project.

mySnackBarConfig: MatSnackBarConfig = {
  duration: 3000,
  horizontalPosition: 'center',
  verticalPosition: 'bottom'
}

displayMessage(msg: string) {
  this.mySnackBarConfig['panelClass'] = ['notification','success'];
  this.snackBar.open(msg, '', this.mySnackBarConfig);
}

以下代码被添加到全局styles.css文件中

// extract from styles.css (global)
snack-bar-container.success  {
  background-color: rgb(31, 121, 39);
  color: rgb(255, 255, 255);
}

snack-bar-container.notification simple-snack-bar  {
  font-size: 18px !important;
}

// this part is all I did to center the text. 
// Take note of the css declaration, not just the style inside.
simple-snack-bar > span {
  margin: 0 auto;
  text-align:center !important;
}

Answer 4

panelClass的{{1}}属性接受一个CSS类，您可以在主应用程序的MatSnackBarConfig中定义它：

styles.css

只需确保还使用openSnackBar(message: string) { let config = new MatSnackBarConfig(); config.panelClass = 'center-snackbar'; this.snackBar.open(message); }选择器！

!important

Answer 5

对于带材质的角7，我在全局样式中使用它。css：

+=

Answer 6

用于按需居中的文本。

SASS：

snack-bar-container.text-center {
  span {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

然后将“文本中心”添加到panelClass

let config = new MatSnackBarConfig();
config.panelClass = "text-center";
this.snackBar.open(message);

这样，如果Snackbar带有动作，您就可以拥有标准的外观。

将文本对齐到Snackbar（角度材质）内的中心

6 个答案: