web-dev-qa-db-fra.com

Panneau de Snackbar angulaire à 5 matériauxClass config

J'essaie d'ajouter un panelClass config au Angular Material Snackbar .

J'ai écrit le code suivant en suivant les documentations des sites officiels.

import { Component, OnInit } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from "@angular/material";
import { Location } from '@angular/common';

@Component({
  selector: 'snack-bar-component-example',
  templateUrl: './snack-bar-component-example.html',
  styleUrls: ['./snack-bar-component-example.css']
})
export class SnackBarComponentExample implements OnInit {

  constructor(public snackBar: MatSnackBar) { }

  ngOnInit() {
  }

  saveButtonClick = () =>{
    this.snackBar.open("This is a message!", "ACTION", {
      duration: 3000,
      panelClass: ["font-family:'Open Sans', sans-serif;"]
    });
  }
}

J'ai déjà lié l'événement au bouton HTML. Lorsque je supprime la configuration panelClass, la configuration de la durée fonctionne correctement . J'importe une police Google (Open Sans) et j'essaie de l'appliquer au Snackbar. Cependant, je reçois une erreur:

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('font-family:'Open Sans', sans-serif;') contains HTML space characters, which are not valid in tokens.

Peut-être que je ne suis pas capable de comprendre comment utiliser panelClass. Même quand j'essaye d'ajouter ceci, 

panelClass: ["color:white;"];

Il montre toujours l'erreur:

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('color: white;') contains HTML space characters, which are not valid in tokens.

Comment puis-je corriger cette erreur et faire fonctionner les choses? S'il vous plaît aider.

PS: Je suis au courant avec la configuration extraClasses. Mais, je ne veux pas l'utiliser comme il est écrit dans la documentation, il sera bientôt obsolète.

PPS:: Cela fonctionne bien avec la config de durée.

angulartypescriptangular-material
6
abhijeetps

Dans votre composant SnackBarComponentExample, essayez: 

saveButtonClick = () =>{
let config = new MatSnackBarConfig();
config.duration = 5000;
config.panelClass = ['red-snackbar']
this.snackBar.open("This is a message!", "ACTION", config);

}

Où 'red-snackbar' est une classe du fichier styles.css de votre application principale. Bizarrement, je ne pouvais pas faire fonctionner config.panelClass lorsque je faisais référence au fichier css associé à mes composants, mais une fois que j'ai placé la classe dans le fichier styles.css principal, mes styles ont été correctement appliqués au snackBar.

13
Narm

Dans mon cas, tout ce qui précède ne fonctionne pas. Cela commence à fonctionner quand j'ajoute !important dans css:

.error-snackbar {
  background-color: Fuchsia !important;
}
4
krzyjez

panelClass est défini comme

panelClass: string | chaîne[]

Des classes CSS supplémentaires à ajouter au conteneur snack-bar.

Il est utilisé pour ajouter une classe, pas un style.

Imaginez la taille du tableau si vous deviez y mettre un style complexe css.

Vous devez donc définir votre style dans un css et ensuite seulement vous pourrez appliquer une classe à la barre:

panelClass: ['first-class', 'second-class'];
2
gyc

Dans angular 7, l’utilisation de :: ng-deep devant la classe a fonctionné pour moi.

::ng-deep  .snackBar-fail {
    color: #ffffff !important;
    background-color: #cc3333 !important;
}
0
Lucky