Menu
I want to give alert controller style in ionic 4.these is my demo code,
async presentalert() {
const alert = await this.alertCtrl.create({
header: ' DO YOU WANT TO CANCEL',
message: 'DO YOU WANT TO CANCEL',
cssClass: 'alertCancel',
mode: 'ios',
buttons: [
{
text: 'NO',
role: 'cancel',
cssClass: 'alertButton',
handler: () => {
console.log('Confirm Cancel');
}
}, {
text: 'YES',
cssClass: 'alertButton',
handler: () => {
console.log('Confirm Okay');
}
}
]
})
await alert.present();
}
and i tried to apply scss in global.scss
.alertCancel{
--background: red;
}
.alertButton {
background-color: white !important;
}
I have tried every possible way to give css in alert controller but it s not working so please help me I am stuck here.
281
In this typescript file, we need first to import the Alert Controller. Then, create a showAlert() function, which contains the alert options such as header, sub-header, message, and button. After that, we create an onDidDismiss() method to resume an interaction with the app.
The alert controller lets you provide a block for configuring your text fields prior to display. The alert controller maintains a reference to each text field so that you can access its value later. Important. The UIAlertController class is intended to be used as-is and doesn't support subclassing.
Note: The right most button (the last one in the array) is the main button. Optionally, a role property can be added to a button, such as cancel . If a cancel role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
--background is a css variable of the component ion-alert, therefore do the following in the variables.scss
ion-alert
{
--background: red !important;
}
For reference:
https://ionicframework.com/docs/theming/css-variables#ionic-variables
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
