Ionic 2警报定制 [英] Ionic 2 Alert customization

问题描述

我想在Ionic 2中自定义警报。我知道我可以在variables.scss中全局完成，但我想在特定页面中修改特定的警报。

I want to customize my alerts in Ionic 2. I know that I can do it globally in the variables.scss, but I want to modify a specific one, in a specific page.

我在警报代码中尝试了cssClass，我尝试了其他不同的东西，但是在全球范围内，而不是特定的。

I tried cssClass in the alert code, I tried other different things, that work, but globally, not for a specific one.

有没有这样做的方法??

Is there any way to do it??

谢谢!!

推荐答案

编辑所有 AlertController.create 方法如下所示：

Edit all your AlertController.create methods to look like this:

const alert = this.alertCtrl.create({
    title: title,
    subTitle: msg,
    buttons: ['OK'],
    cssClass: 'alertCustomCss' // <- added this
});

并将此添加到 app.scss ：

.alertCustomCss {
    // text color for basic alerts
    color: white; 

    // alert modal page bg color. Warning this will remove the alert transparency
    background-color: color($colors, dark, base); 

    button {
        color: white !important; // button text color
        background-color: color($colors, secondary, base) !important;
            //button bg color
    }

    .alert-message {
        color: white; // text color for confirm alerts
    }

    .alert-wrapper {
        background-color: color($colors, dark, base); // bg color of alert content
    }
  }

这篇关于Ionic 2警报定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！