如何在 Ionic2 的警报中更改按钮的颜色

Posted 2023-03-06

【中文标题】如何在 Ionic2 的警报中更改按钮的颜色

【英文标题】：How to change the color of buttons in Alert in Ionic2

【发布时间】：2018-03-01 07:20:50

【问题描述】：

是否可以在 Ionic2 中更改警报（确定、取消）按钮的颜色？我们可以使用cssClass 属性为按钮着色吗？

.buttonCss
    button
        color:#e74c3c !important;
    

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

但我需要得到以下结果（两个按钮都应该用不同的颜色），

任何帮助表示赞赏...！

编辑1：添加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();

【问题讨论】：

@sebaferreras ，你能帮我解决这个问题吗？

您只能在该用户在该帖子上添加评论/答案时标记该用户（由于您的评论，我没有收到任何通知，我看到此帖子只是因为我从家里进入页）。关于你的问题，请看看我的回答，如果它对你有用，请告诉我:)

@sebaferreras，谢谢你的建议，我会记住的：）。

【参考方案1】：

您需要给每个按钮一个类，然后在为每个按钮分配一个类时，您可以更改每个单独按钮的颜色。您还可以添加悬停效果以更改悬停时的颜色。

【讨论】：

这是一个移动应用程序。请检查我更新的问题

就像我在答案中所说，您需要为每个按钮提供一个 id 或一个类，并为每个按钮定义 css。

使用 cssClass?

【参考方案2】：

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

【讨论】：

让我检查一下

使用 cssClass 类型的实例

【参考方案3】：

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;
    

【讨论】：

太棒了。你又帮了我。非常感谢