[英]How to change the color of buttons in Alert in Ionic2
是否可以在Ionic2中更改Alert(Ok,Cancel)按钮的颜色? 我们可以使用cssClass
属性为按钮赋予颜色吗?
.buttonCss{
button{
color:#e74c3c !important;
}
}
上面的代码为Ok和Cancel按钮提供了相同的颜色,如下图所示
任何帮助表示赞赏......!
showAlert()
函数 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();
}
1)第一个选项,只使用警报类,每个按钮使用css样式规则
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();
}
接着:
.buttonCss {
button.alert-button:nth-child(1){
color: red;
}
button.alert-button:nth-child(2){
color: green;
}
}
这样第一个按钮( nth-child(1)
)将为red
,第二个按钮( nth-child(2)
)将为green
。
2)第二个选项,使用类的警报,并将cssClass
属性添加到每个按钮,以便在每个按钮上使用该自定义类
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();
}
接着:
.buttonCss {
button.alert-button.exit-button{
color: red;
}
button.alert-button.cancel-button{
color: green;
}
}
您需要为每个按钮指定一个类,然后在为每个按钮指定一个类时,您可以更改每个按钮的颜色。 您还可以添加悬停效果以更改悬停时的颜色。
您可以使用cssClass
为按钮添加自定义类
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',
cssClass: 'customClass',
role: 'cancel',
handler: () => noHandler(caller)
}
]
});
alert.present();
}
在Css中:
.customClass{
color:#e74c3c !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.