如何改变Ionic2中提示按钮的颜色

[英]How to change the color of buttons in Alert in Ionic2


Is it possible to change the color of buttons of Alert (Ok, Cancel) in Ionic2? Can we use cssClass property to give color to buttons?

Ionic2中是否可以更改Alert (Ok, Cancel)按钮的颜色?我们可以使用cssClass属性为按钮赋予颜色吗?

.buttonCss{
    button{
        color:#e74c3c !important;
    }
}

The above code gives the same color to the both Ok and Cancel buttons like the below image enter image description here

上面的代码为Ok和Cancel按钮提供相同的颜色,如下图所示

But I need to get the following result(Both button shoulb in in different color), enter image description here

但是我需要得到以下结果(两个按钮都应该用不同的颜色),

Any help is appreciated...!

任何帮助都是感激…!

Edit 1: Added showAlert() function

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

3 个解决方案

#1


6  

1) First option, just using a class for the alert, and a css style rule for each button

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

And then:

然后:

.buttonCss {

    button.alert-button:nth-child(1){
      color: red;
    }

    button.alert-button:nth-child(2){
      color: green;
    }
}

This way the first button (nth-child(1)) will be red and the second button (nth-child(2)) will be green.

这样,第一个按钮(n -child(1))将是红色的,第二个按钮(n -child(2))将是绿色的。

2) Second option, using a class for the alert, and adding the cssClass property to each button, in order to use that custom class on each button

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

And then:

然后:

.buttonCss {

    button.alert-button.exit-button{
      color: red;
    }

    button.alert-button.cancel-button{
      color: green;
    }
}

#2


0  

You need to give each button a class, then when assigning a class to each button, you can change the colour of each individual button. Also you can add hover effects to change the colour on hover as well.

您需要给每个按钮一个类,然后在为每个按钮分配类时,您可以更改每个按钮的颜色。你也可以添加鼠标悬停效果来改变鼠标悬停的颜色。

#3


0  

you have options to add custom class for button using cssClass

您可以选择使用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();

}

}

In Css:

在Css中:

.customClass{
  color:#e74c3c !important;
 }

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2017/09/20/7dabcd5420ab5a928e5a97eb74dc597d.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com