css - Hur man ändrar färgen på knappar i Alert i Ionic2
Är det möjligt att ändra färgen på knapparna i Alert (Ok, Avbryt) i Ionic2? Kan vi använda cssClass-egenskapen för att ge färg till knapparna?
.buttonCss{
button{
color:#e74c3c !important;
}
}
Koden ovan ger samma färg till både Ok- och Avbryt-knapparna som på bilden nedan
Men jag behöver få följande resultat (Båda knapparna ska vara i olika färger)
All hjälp uppskattas...!
Redigera 1: Lagt till showAlert()-funktionen
showAlert(title, message, yesHandler, noHandler, caller) {
let alert = this.alertCtrl.create({
title: title || "Please Confirm",
message: message,
cssClass:'buttonCss',
buttons: [
{
text: 'Exit',
handler: () => yesHandler(caller)
},
{
text: 'Cancel',
role: 'cancel',
handler: () => noHandler(caller)
}
]
});
alert.present();
}
Svar #1
1) Första alternativet, bara använda en klass för alerten och en CSS-stilregel för varje knapp
showAlert(title, message, yesHandler, noHandler, caller) {
let alert = this.alertCtrl.create({
title: title || "Please Confirm",
message: message,
cssClass:'buttonCss',
buttons: [
{
text: 'Exit',
handler: () => yesHandler(caller)
},
{
text: 'Cancel',
role: 'cancel',
handler: () => noHandler(caller)
}
]
});
alert.present();
}
Och sedan:
.buttonCss {
button.alert-button:nth-child(1){
color: red;
}
button.alert-button:nth-child(2){
color: green;
}
}
På detta sätt kommer den första knappen (nth-child(1)) att vara röd och den andra knappen (nth-child(2)) att vara grön.
2) Andra alternativet, att använda en klass för alerten, och lägga till cssClass-egenskapen på varje knapp, för att använda den anpassade klassen på varje knapp
showAlert(title, message, yesHandler, noHandler, caller) {
let alert = this.alertCtrl.create({
title: title || "Please Confirm",
message: message,
cssClass:'buttonCss',
buttons: [
{
text: 'Exit',
cssClass: 'exit-button',
handler: () => yesHandler(caller)
},
{
text: 'Cancel',
role: 'cancel',
cssClass: 'cancel-button',
handler: () => noHandler(caller)
}
]
});
alert.present();
}
Och sedan:
.buttonCss {
button.alert-button.exit-button{
color: red;
}
button.alert-button.cancel-button{
color: green;
}
}

