2

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

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

有什么办法吗？

4

5 回答 5

7

编辑所有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
    }
  }
于 2017-11-14T10:01:05.890 回答
3

添加样式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;
  }
}
于 2017-09-08T03:09:38.330 回答
2

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

在Sample1.scss你会发现：

sample1-page {

}

在那个地方，您必须定义您的自定义 css 类或重新定义 ionic 元素样式，并且您的所有样式将仅在 Sample1 页面上具有范围。

希望这可以帮助你

更新

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

应用程序.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>

样本1.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();
  }

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

于 2017-04-19T15:03:17.583 回答
1

只需在警报的 cssClass 中添加您想要的任何名称，因为我命名为alertCustomCss

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

应用上述样式后查看图像 =>图像链接

于 2018-06-21T11:11:18.663 回答
0

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

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

page-something{
}
于 2018-12-10T16:00:57.617 回答