2016-07-26 11 views
6

Ich probierte beide \ n und < br />, aber leider nicht funktioniert!Ist es möglich, Newline-Zeichen in Ionic2 Toast zu haben?

Ist das möglich?

//Displaying toast to welcome user! 
 
let user = this.currentUser(); 
 
//console.log(user); 
 
let toast = Toast.create({ 
 
    message: 'Hi ' + user.email + '! <br/> Welcome to My App', 
 
    duration: 5000, 
 
    position: 'bottom' 
 
}); 
 

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

 
this.nav.present(toast);

+0

verwenden müssen http://stackoverflow.com/questions/37118385/styling-ionic -2-toast –

+1

das Problem nicht gelöst! –

+1

Rechts. Es ist eine ähnliche Frage, bei der die Antwort "Nein, du kannst nicht" lautet. Es gibt auch einen Link zu den Dokumenten. –

Antwort

10

Eigentlich ist es möglich. Sie können wie folgt vorgehen:

.toast-message { 
    white-space: pre; 
} 

und \n für einen Zeilenumbruch.

Hinweis: Werfen Sie einen Blick auf home.ts und style.css.

Siehe working plunkr

+0

Irgendwie funktioniert es nicht in der tatsächlichen Anwendung, ich schrieb den gleichen Code über Plunkr (funktioniert!), Aber nicht in meiner Typ-Skript-Datei. ODER das kann das Problem in Ionic2 sein –

+1

Ok das funktioniert. Ich habe zuerst '
' verwendet, aber es funktioniert mit '\ n' wie in der Antwort. – Guus

+0

Ich musste das CSS nicht tun, \ n arbeitete aus der Box.
war eine tote Person –

5

Obwohl @iWork Lösung für viel Situation funktioniert, aber wenn Sie close Button in Ihrem Toast wird es aus dem Bildschirm geschoben werden.

So können Sie diese Stylesheet verwenden, anstatt:

.toast-message { 
    white-space: pre-line; 
} 

ps Sie \n für Zeilenumbruch in der Zeichenfolge

Verwandte Themen