Different colored toasts

Ionic Framework ionic-v3
1

Hi there,

I am busy implementing toast messages to give feedback to our users on their network. If the network disconnects we want to show a reddish toaster, if it reconnects a green one etc (with some text)

I noticed i can override a sass varaible but this will not allow me to use different colors for different toasters.
I also noticed a option to give append a css class, but when i give it a unique class and on this class say

background-color: red;

The entire app turns to red once a toaster pops up :sweat_smile:

This is not what i expected.

Anyone have any experience using differently coloured toasters ?

Example:

this.disconnectToast = this.toastCtrl.create({
          message: 'Network disconnected',
          showCloseButton: true,
          cssClass: "toast-danger",
          position: "bottom"
        });

toast-danger contains backgorund-color:red;

With best regards,
Robin

1 Like
2

Do a custom class :slight_smile:

3

I tried this but it colors the entire page, the custom class you can pass along are on a level higher on some transparent page size div which than gets colored red

4

Fixed it,

Pass a custom class and in your css say

.custom-class{
.toast-wrapper {
background-color: red;
}
}

2 Likes