Ionic 2 警报自定义答案

【问题标题】：Ionic 2 Alert customizationIonic 2 警报自定义
【发布时间】：2017-09-15 19:17:56
【问题描述】：

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

我在警报代码中尝试了 cssClass，我尝试了其他不同的东西，但它们是全局的，而不是针对特定的。

有什么办法吗？

【问题讨论】：

标签： ionic-framework sass ionic2 ionic-popup

【解决方案1】：

虽然这来自 Ionic 3，但如果您仍希望将本地更改保留在本地文件而不是 app.scss 中，则始终可以将样式放在 something.scss 文件中的 page-something 块之外。

.alert-style{
    padding-left: 16px;
}

page-something{
}

【讨论】：

【解决方案2】：

只需在我命名为 alertCustomCss

的警报的 cssClass 中添加您想要的任何名称

logOut() {
  this.alrtCtrl.create({
                title: "Log out ?",
                message: "Are you sure to logout?",
                buttons: [
                    {
                        text: "Cancel",
                        role: 'cancel',
                        handler: () => {
                        //something to do 
                        }
                    },
                    {
                        text: "Confirm",
                        handler: () => {
                            //log Out

                        }
                    }
                ],
                cssClass: 'alertCustomCss'
            }).present();

为 alertCustomCss 类添加样式

.alertCustomCss{
    background-color: red;
    color: white;
    button{
        color: green!important;
    }
    .alert-wrapper{
        background: yellow;
    }
    .alert-message {
        color: skyblue;
    }
    .alert-title{
        color: black;
    }
}

应用以上样式后查看图片 => Image Link

【讨论】：

【解决方案3】：

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

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
    }
  }

【讨论】：

【解决方案4】：

如果您使用 ionic CLI 命令ionic g page Sample1 创建了特定页面（我们称之为Sample1），您将在项目中找到一个名为 Sample1 的目录，其中包含 3 个文件：Sample1.html、Sample1.ts 和 @987654326 @。

在Sample1.scss 你会发现：

sample1-page {

}

在那个地方，您必须定义您的自定义 css 类或重新定义 ionic 元素样式，并且您的所有样式都只能在 Sample1 页面上使用。

希望对你有帮助

更新

由于Duannx 提到警报组件不是您页面的子级，因此如果您将 css 类放入特定页面的 .scss 文件中，它将不会应用于警报，但如果您将其放入 app.scss 它会被应用。所以这是一个例子：

app.scss

.alertCustomCss{
  background-color: white;
  color: blue;
  button{
      color: blue;
  }
}

Sample1.html

<button ion-button block outline (click)="showAlert()">Alert</button>
<button ion-button block outline (click)="showAlert2()">Alert2</button>

Sample1.ts

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK'],
      cssClass: 'alertCustomCss'
    });
    alert.present();
  }

  showAlert2() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }

现在您将看到“警报”按钮将显示自定义警报，而“警报2”按钮将显示具有默认 css 样式的更改

【讨论】：

您可能需要注意组件中的选择器属性决定了元素名称。
嗨，我知道我需要在哪里做，问题是，如果不是全局警报，我无法修改它，我已经尝试过你所说的，我知道警报的类使用，但即使我覆盖它们，警报仍然保持不变。
您不能在some-page.scss 中添加警报样式，因为警报不是您页面的子页面。只需在 chrome 中检查它并查看。所以在app.scss 中添加样式是正确的答案

【解决方案5】：

在app.css 中添加样式并在page.ts 中调用它

showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK'],
      cssClass: 'alertCustomCss'
    });
    alert.present();
}

在 App.css 中

.alertCustomCss{
  background-color: white;
  color: blue;
  button{
      color: blue;
  }
}

【讨论】：