CODEWITHSUNDEEP
javascriptcssangularionic-framework
user15759433
user15759433

Reputation:

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

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.

Upvotes: 1

Views: 1438

Answers (2)

Ysmael Marcano
Ysmael Marcano

Reputation: 1

You can change colors or styles assign role:"string" to different buttons in a IonToast and then to use ::part(button "string") selectors in css to change its style

for example:

ion-toast.eraseToast::part(button) {
  font-family: var(--customFont);
  color: #ff5858;
}

ion-toast.eraseToast::part(button cancel) {
  color: rgb(255, 255, 255);
}
<IonToast trigger='erasebutton'icon={trash} cssClass={"eraseToast"}  message={"Clear the counter?"} 
 buttons={[ {text:"Clear" ,role:"clear",handler()
  {erase()} },
 {text: "Dismiss",role:"cancel", handler() { eraseButtonItem?.classList.remove("selected") },} ]}>

</IonToast>

result: https://i.sstatic.net/8KKVG.png

Upvotes: 0

Vijay Kumawat
Vijay Kumawat

Reputation: 963

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' );
  });
});

Upvotes: 1

Related Questions