离子2警报自定义

Question

我想在离子2中自定义我的警报。我知道我可以在变量中在全球范围内完成此操作。/p>

我在警报代码中尝试了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命令ionic g page Sample1创建了特定页面(我们称其为 Sample1(，则在项目中，您会在项目中找到一个名为Sample1的目录，带有3个文件：Sample1.html，Sample1.ts和Sample1.scss。

在Sample1.scss中，您会发现：

sample1-page {
}

在那个地方，您必须定义自定义CSS类或重新定义离子元素样式，并且所有样式仅在sample1页面上具有范围。

希望这可以帮助您

update

由于Duannx提到了警报组件不是您页面的孩子，因此，如果将CSS类放入特定页面.scs.scs文件中，则不会将其应用于警报，但是如果您将其放入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();
  }

现在，您将看到按钮"警报"将显示自定义的警报，而" alert2"将显示默认CSS样式

Answer 4

只需在我命名 altercustomcss

的情况下添加您想要的任何名称

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 class

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

在应用上面的样式=>图像链接

Answer 5

尽管这是来自离子3，但是如果您仍然想在本地文件中保留本地更改，则可以随时将样式放在page-something块之外。Scss文件。app.scs.

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