Question

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

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

有什么办法吗？

Answer 1

修改所有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
    }
  }

Answer 2

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

Answer 3

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

在Sample1.scss中，您会找到：

＆＃13;

Sample1.scss

＆＃13;

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

希望这可以帮到你

的更新

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

<强> app.scss

＆＃13;
＆＃13;
sample1-page { }
＆＃13;
＆＃13;
＆＃13;

<强> Sample1.html

＆＃13;
＆＃13;
app.scss
＆＃13;
＆＃13;
＆＃13;

<强> Sample1.ts

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

现在你会看到按钮＆＃34; Alert＆＃34;按钮＆＃34; Alert2＆＃34;将显示自定义提醒。将使用默认的css样式显示更改

Answer 4

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

LinkedList

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

应用上述样式后查看图像=> Image Link

Answer 5

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

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

page-something{
}

Ionic 2警报定制

5 个答案:

的更新