ionic2 - 在警报控制器标题和按钮中显示离子图标 [英] ionic2 - show ion-icon in alert controller title and buttons

问题描述

在 ionic 2 应用程序中，是否可以在警报控制器中添加 ion-icon，如下所示

In ionic 2 application, is that possible to add ion-icon in the alert controller like shown below

    let showAlertCtrl = this.alertCtrl.create({
  title: '<ion-icon ios="ios-add" md="md-add"></ion-icon>' +'Add your info',
  cssClass: 'myCustomCSS',
  message: msg,
  enableBackdropDismiss: false,
  buttons: [
    {
      text: '<ion-icon ios="iOS-search" md="md-add"></ion-icon>' +' Ok',
      cssClass: 'customAlertBtn',
      handler: (data: any) => {

      }
    },]
});

showAlertCtrl.present();      

需要在标题和按钮上显示 ion-icon 图像.这可能吗?

Need to display ion-icon image on both title and buttons. Is that possible?

我也知道我们可以使用模态来实现这一点.但我的首要任务是在警报控制器中检查它.

Also I knew that we can use modal to achieve this. But my first priority to check it in alert controller.

谢谢AK

推荐答案

响应有点晚.我今天尝试实现这一点，我做到了:

A bit late response. I tried to achieve this today, and I made it like this:

在您的 app.scss 中创建一个 css 类，并将该类添加到警报选项cssClass"中.

Create a css class in your app.scss and add that class in the alert option "cssClass".

app.scss

.yourClass{
  background-image: url(your-image-url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;  
}

可以根据您的要求更改这些 css 值.

These css values can be changed per your requirements.

在警报中:

buttons: [
           {
             text: '',
             cssClass: 'yourClass',
             handler: data => {}
          }
        ]

这篇关于ionic2 - 在警报控制器标题和按钮中显示离子图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！