toast - custom - Estilo iónico 2 tostadas

toast close ionic

Question

¿Hay alguna manera de estilo el mensaje de texto dentro de un brindis iónico 2?

He intentado esto:

 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);
}

Pero claramente no puedes usar html en el texto, así que supongo que la respuesta a mi pregunta es ¿no?

Answer 1

Debería poder cambiar cualquiera de los .toast-message en el CSS mediante el selector .toast-message :

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

O bien, si nos fijamos en los documentos ( http://ionicframework.com/docs/v2/api/components/toast/Toast/ ) hay una propiedad cssClass que puede usar para asignarle a su brindis una clase específica y luego darle un estilo.

Answer 2

Puede lograrlo, sin embargo, necesita modificar la plantilla del componente de brindis.

A través del explorador: / node_modules / ionic-angular / components / toast / toast.js

Cambiar línea 194 (plantilla): {{d.message}} a <div [innerHTML]=''d.message''></div>

Answer 3

Debe agregar ''cssClass: "yourCssClassName"'' en su función 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",
});

de lo que puede agregar cualquier característica a la clase de su CSS. Pero su característica css salió de la configuración predeterminada de la página. Exmp:

 page-your.page.scss.name {
//bla bla
}
.yourCssClassName {
text-align:center;
}

Answer 4

Pude lograr un cambio de color en la tostadora agregando una clase personalizada en la tostadora para crear

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

En ese archivo scss de páginas, salí del nombre de la página anidada por defecto (porque la tostadora NO está dentro de la raíz del nombre del nombre de la página ion). Y a pesar de que esto es un poco hacky, me centré explícitamente en el siguiente elemento div después de la clase personalizada que agregué

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

Yo digo que es hacky porque tienes que usar el !important en él. Puede evitar lo importante al envolver el .toast-success con .md,.ios,.wp{...

Puede anular el estilo predeterminado anulando las variables principales de tostadora en el archivo theme/variables.scss .

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

Sin embargo, esto solo anulará el valor predeterminado y no un valor personalizado. hay algunas otras variables que también se pueden diseñar.

Answer 5

Ionic 2 proporciona una forma muy útil de anular el estilo de sus componentes. Puede anular la variable SASS de tostador en src / theme / variables.scss añadiendo

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

esto anulará el estilo predeterminado, consulte esta variable de Sass Ionic superior

Answer 6

Primero, importa el controlador de brindis desde ionic-angular y hazlo en constructor.

import { ToastController } from "ionic-angular";
constructor(private _tc: ToastController) {
}

Después de eso, donde sea que quieras mostrar tu mensaje de brindis, escríbelo.

let options = {
message: "Your toast message show here",
duration: 3000,
cssClass: "toast.scss"
};
this._tc.create(options).present();

Aquí está mi scss:

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

O puede verificar el mejor ejemplo de este enlace . Creo que te ayudará. :)

O bien verifique la respuesta en este enlace .