Apply differents styles for buttons of ion-toast Component and shadow parts

user_15759433 0
Viewed 532

I´m creating an application with Ionic and i´m using the toast Component with two buttons. I have to create a different style for each button.

My code is this:

import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'toast-example',
  templateUrl: 'toast-example.html',
  styleUrls: ['./toast-example.css'],
})
export class ToastExample {

  constructor(public toastController: ToastController) {}

  async presentToast() {
    const toast = await this.toastController.create({
      message: 'Your settings have been saved.',
      duration: 2000
    });
    toast.present();
  }

  async presentToastWithOptions() {
    const toast = await this.toastController.create({
      header: 'Toast header',
      message: 'Click to Close',
      position: 'top',
      buttons: [
        {
          side: 'start',
          icon: 'star',
          text: 'Favorite',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Done',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    await toast.present();

    const { role } = await toast.onDidDismiss();
    console.log('onDidDismiss resolved with role', role);
  }

}

And i want to do this:

ion-toast::part(button):first-of-type {
  --button-color: green !important;
}
ion-toast::part(button):nth-of-type(2) {
  --button-color: red !important;
}

but it's not working :(

Is there a way to apply styles to each button in this case?

Thanks in advance.

ionic-framework angular css javascript
1 Answers

It's not possible to use different styles for both buttons by css but yes you can use a little bit of javascript to achieve this.

put a custom class to the toast

cssClass: 'toast-custom-class'

put custom classes on both the buttons using cssClss first-button and second-button

then present toast like

await toast.present().then(() => {
  const toasts = document.getElementsByClassName('toast-custom-class');
  const shadow = toasts[0].shadowRoot;
  const childNodes = Array.from(shadow.childNodes);
  childNodes.forEach((childNode: any) => {
     const firstButton = childNode.getElementsByClassName('first-button');
     firstButton[0].setAttribute( 'style', 'color: red !important' );
     const secondButton = childNode.getElementsByClassName('second-button');
     secondButton[0].setAttribute( 'style', 'color: green !important' );
  });
});
user_103303720
Related