Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 231637

Ionic 4 - How to change Toast button's style?

$
0
0

Hi there! Add a custom class for your Toast cssClass: 'my-custom-toast-class'.
It will end up like this:

async showToast(){
    const toast = await this.toastController.create({
      header: 'Nice Toast 😊',
      message: 'Try it to see the result 😊',
      position: 'top',
      animated: true,
      cssClass: 'my-custom-toast-class',
      buttons: [
        {
          side: 'end',
          icon: 'checkmark-circle-outline',
          role: 'ok',
          cssClass: 'custom-toast-button',
          handler: () => {
             // Do something...
          }
        }        
      ]
    });

    toast.present().then(() => {
      const toasts = document.getElementsByClassName('my-custom-toast-class');
      const shadow = toasts[0].shadowRoot;
      const childNodes = Array.from(shadow.childNodes);
      childNodes.forEach((childNode: any) => {
         const firstButton = childNode.getElementsByClassName('toast-button');
         firstButton[0].setAttribute( 'style', 'color: #00CCCC !important');
         const secondButton = childNode.getElementsByClassName('second-button');
         secondButton[0].setAttribute( 'style', 'color: violet !important' );         
      });
    });
  }

Viewing all articles
Browse latest Browse all 231637

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>