web-dev-qa-db-fra.com

Style ionic 2 toasts

Existe-t-il un moyen de styliser le message texte dans un ionic 2 toasts?

J'ai essayé ceci:

    let toast = Toast.create({
      message: "Some text on one line. <br /><br /> Some text on another line.",
      duration: 15000,
      showCloseButton: true,
      closeButtonText: 'Got it!',
      dismissOnPageChange: true
    });

    toast.onDismiss(() => {
      console.log('Dismissed toast');
    });

    this.nav.present(toast);
  }

Mais clairement, vous ne pouvez pas utiliser html dans le texte, donc je suppose que la réponse à ma question est non?

toastionic2
20
Bill Noble

Vous devez ajouter 'cssClass: "yourCssClassName"' dans votre fonction toastCtrl.

 let toast = Toast.create({
      message: "Some text on one line. <br /><br /> Some text on another line.",
      duration: 15000,
      showCloseButton: true,
      closeButtonText: 'Got it!',
      dismissOnPageChange: true,
      cssClass: "yourCssClassName",
    });

que vous pouvez ajouter n'importe quelle fonctionnalité à votre classe css. Mais votre fonctionnalité css est allée en dehors de la page'css par défaut. Exmp:

   page-your.page.scss.name {
     //bla bla
    }
 .yourCssClassName {
   text-align:center;
  }
29
Burhan Gül

J'ai pu obtenir un changement de couleur de grille-pain en ajoutant une classe personnalisée sur la création de grille-pain

let toast = this.toastCtrl.create({
    message: 'Foobar was successfully added.',
    duration: 5000,
    cssClass: "toast-success"
  });
  toast.present();
}

Dans ce fichier scss de pages, je suis ensuite sorti du nom de page imbriqué par défaut (parce que le grille-pain est PAS à l'intérieur de la racine du nom de la page ion). Et bien que ce soit un peu hacky, j'ai ciblé explicitement le prochain élément div après la classe personnalisée que j'ai ajoutée

.toast-success {
  > div{
       background-color:#32db64!important;
   }
}

Je dis son hacky parce que vous devez utiliser le !important dessus. Vous pouvez éviter le! Important en enveloppant le .toast-success avec .md,.ios,.wp{...

Vous pouvez remplacer le style par défaut en remplaçant les principales variables du grille-pain dans le theme/variables.scss fichier.

$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);

Cela ne remplacera que la valeur par défaut et non une valeur personnalisée. il y a quelques autres variables qui peuvent également être stylisées.

25
user1752532

Tout d'abord, importez le contrôleur toast depuis ionic-angular et en faire objet dans le constructeur.

import { ToastController } from "ionic-angular";

constructor(private _tc: ToastController) {
}

Après cela, partout où vous voulez montrer votre message toast, écrivez cela.

let options = {
  message: "Your toast message show here",
  duration: 3000,
  cssClass: "toast.scss"
 };

this._tc.create(options).present();

Voici mon scss:

.toast-message {
  text-align: center;
}

Ou vous pouvez vérifier le meilleur exemple de cette lien . Je pense que cela vous aidera. :)

Ou bien vérifiez la réponse à ce sujet lien .

7
Bhavsang Jam

Si vous définissez votre propre classe css dans app.scss (pas dans page.scss) vous pouvez la styliser avec .toast-wrapper et .toast.message Pas besoin d'utiliser > div{

Exemple:

.yourtoastclass {
  .toast-wrapper {
    background: blue;
    opacity: 0.8;
    border-radius: 5px;
    text-align: center;
  }
  .toast-message {
    font-size: 3.0rem;
    color: white;
  }
}

dans theme/variables.scss, vous pouvez définir une valeur par défaut

Exemple (rouge et peu transparent):

$toast-width:   75%;  /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);
6
Ralf Viellieber

Ionic 2 fournit un moyen très utile de remplacer leur style de composant, vous pouvez remplacer la variable SASS du grille-pain dans src/theme/variables.scss en ajoutant

$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;

cela remplacera le style par défaut, veuillez vous référer à ceci Overriding Ionic Sass variable

4
Sherif A.Mounir

Vous pouvez accomplir, mais vous devez modifier le modèle de composant toast lui-même.

Via Explorer:\node_modules\ionic-angular\components\toast\toast.js

Modifier la ligne 194 (modèle): {{d.message}} à <div [innerHTML]='d.message'></div>

3
Mark

Vous devriez pouvoir modifier n'importe quel style de message dans le CSS en utilisant .toast-message sélecteur:

.toast-message { 
    font-family: Helvetica,
    color: red
}

Ou, si vous regardez les documents ( http://ionicframework.com/docs/v2/api/components/toast/Toast/ ) il existe une propriété cssClass que vous pouvez utiliser pour attribuer à votre toast un classe spécifique, puis le style.

2
Pat Murray

Modifier la couleur et l'opacité de l'arrière-plan du pain grillé:

let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom',
      cssClass: 'changeToast'
    });

et ajouter app.scss:

.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};

Il est utilisé avec .toast-message

1
Rajnikant

J'ai tout essayé ci-dessus, mais ne fonctionnait toujours pas, donc je tombe sur une nouvelle solution, vous avez besoin de cssClass en dehors de la page déclaration css:

let toast = this.toastCtrl.create({
          message: msg,
          duration: 3000,
          position: 'bottom',
          cssClass: 'toastcolor'
        });

post-list.scss comme celui-ci

page-post-list {

}
.toastcolor .toast-message {
    background-color:skyblue;
}
1
justnajm