Ionic 2 Toast Message and CSS


#1

I’m using a Toast component in a Ionic 2 project:

presentToast() {
    let toast = Toast.create({
      message: 'Thanks for signing up! NEWLINE Please, login now...',
      duration: 5000,
      position: 'top'
    });

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

    this.nav.present(toast);
}

How can I add a new line in the message parameter?

I like an output like the following:

Thanks for signing up!
Please, login now…

I also configure this changes in scss file to get the Toast component with white background and black text:

.toast-container {
  background-color: white;
}

.toast-message {
  color: black;
}

How can I change the css to get transparency of Toast component? opacity? where?


#2

You probably don`t need it anymore but maybe this will help someone else.

In your .scss file add this part of code

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

Now when you use \n you create a new line in your message string for example in your case

message: 'Thanks for signing up! \nPlease, login now...',


#3

Awesome, I tried
.toast-message {
white-space: pre;
}

but if there were close button, the button pushed off the screen, but your proposed solution works :wink: