Выровнять текст по центру внутри Snackbar (угловой материал) - PullRequest
0 голосов
/ 08 октября 2018

Эй, как мне выровнять текст внутри 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);
}

}

спасибо тебе:)

Ответы [ 4 ]

0 голосов
/ 15 июня 2019

Для угловых 7 Вт / материал, я использую это в глобальном стиле. CSS:

.mat-simple-snackbar span {
  margin: auto;
  text-align: center;
}
0 голосов
/ 08 октября 2018

Свойство panelClass MatSnackBarConfig принимает класс CSS, который вы можете определить в styles.css:

openSnackBar(message: string) {
  let config = new MatSnackBarConfig();
  config.panelClass = 'center-snackbar';
  this.snackBar.open(message);
}

вашего основного приложения. Просто убедитесь, что вы также используете селектор !important!

.center-snackbar {
  text-align: center !important;
}
0 голосов
/ 15 декабря 2018

Просто добавьте это в свой style.css (или любой глобальный css, в моем случае я поместил его в свой app.component.scss)

margin: auto; центрирует тег span внутри SnackBar

text-align: center; центрирует текст внутри span

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

Будут применены подобные настройкина все ваши закусочные.

0 голосов
/ 08 октября 2018

Попробуйте это

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...