2
votes

Changer la couleur de fond du message toast Ionic 4

Comment puis-je changer la couleur d'arrière-plan du message toast?

J'ai essayé ceci: mais pas de chance. Est-ce dû à l'effet shadow DOM ?

variable.scss

  async showErrorToast(data: string) {
    const toast = await this.toastCtrl.create({
      message: data,
      duration: 3000000,
      position: 'bottom'
    });
    toast.present();
  }

global.scss

ion-toast>.toast-wrapper {
    background-color: red !important;
}

.ts

--background:red;

typescript angular html css ionic4

4 commentaires

et si vous n'essayez que ce .toast-wrapper {background-color: red! important; }

J'ai essayé ça. Mais cela n'a jamais été appliqué. Est-ce à cause du Shadow DOM ? @TemaniAfif

oui c'est à cause de l'ombre, j'ai remarqué ça .. le CSS devrait être ajouté à l'intérieur

Comment puis-je pirater ça? @TemaniAfif

5 Réponses :

1
votes

Définissez d'abord la classe comme ceci:

{
    message: data,
    duration: 3000000,
    position: 'bottom',
    cssClass:'toast-bg'

}

puis passez la classe comme paramètre à l'option toast comme ceci:

.toast-bg {
background-color:red;
}

0 commentaires

0
votes

Ajoutez la propriété cssClass lors de la création du toast et ajoutez-y le nom de la classe

.toast_style {
background-color:red;
}

Ajoutez une classe de style

 async showErrorToast(data: string) {
    const toast = await this.toastCtrl.create({
      message: data,
      duration: 3000000,
      position: 'bottom',
      cssClass: 'toast_style'
    });
    toast.present();
  }

0 commentaires

1
votes

Assurez-vous de déclarer la classe de style dans le fichier public .scss. Je pense qu'il s'appelle app.scss pour Ionic 3 et global.scss dans Ionic v4.

0 commentaires

9
votes

Vous pouvez définir la couleur dans les paramètres de toast:

 const toastController = document.querySelector('ion-toast-controller');
 await toastController.componentOnReady();
 const toast = await toastController.create({
   showCloseButton: false,
   message: 'test toast message',
   position: 'top',
   duration: 2000,
   color: 'danger'
 });
 await toast.present();

0 commentaires

0
votes

Vous pouvez utiliser les couleurs de la palette de couleurs de votre application. Les options par défaut sont: primaire , secondaire , tertiaire , success , warning , danger , light , medium et dark.

async showErrorToast(data: string) {
    const toast = await this.toastCtrl.create({
      ...
      color: 'primary'
    });
    toast.present();
  }

pour plus de détails Documents Ionic

0 commentaires