ionic2 - отображать значок ion в заголовке и кнопках контроллера предупреждений

В приложении ionic 2 возможно ли добавить ion-icon в контроллер предупреждений, как показано ниже

    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 как на заголовке, так и на кнопках. Это возможно?

Также я знал, что для этого можно использовать модальное окно. Но моя первая задача - проверить это в контроллере предупреждений.

Спасибо АК


angular ionic3 modal-dialog ionicons ionic2
person Ankr    schedule 23.06.2018    source источник
comment
Насколько мне известно, Ionic не поддерживает ion-icons в предупреждениях. На него есть запрос функции: github.com/ionic-team/ionic/issues/ 7874   -  person Stephan Strate    schedule 23.06.2018

Ответы (3)


arrow_upward
1
arrow_downward

Немного запоздалый ответ. Я пытался добиться этого сегодня, и у меня получилось вот так:

Создайте класс css в своем app.scss и добавьте этот класс в параметр предупреждения «cssClass».

app.scss

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

Эти значения css можно изменить в соответствии с вашими требованиями.

И в предупреждении:

buttons: [
           {
             text: '',
             cssClass: 'yourClass',
             handler: data => {}
          }
        ]
person Simão Garcia    schedule 06.06.2019

arrow_upward
0
arrow_downward

Если вы решите использовать модальное окно, вы можете сделать его похожим на предупреждение с помощью css, например:

    var z: any = document.getElementsByTagName("ion-modal");
    z[0].style.background = "rgba(0,0,0,0.8)";
    z[0].style.padding = "36px";
    z[0].style.paddingTop = "150px";
    z[0].style.paddingBottom = "226px";
    z[0].childNodes[1].style.borderRadius = "6px";
person Franco Coronel    schedule 24.06.2018

arrow_upward
-1
arrow_downward

Вы должны использовать обратные кавычки для синтаксического анализа html:

title: `<ion-icon ios="ios-add" md="md-add"></ion-icon>Add your info`
person Franco Coronel    schedule 23.06.2018
comment
это не работает, я думаю, нам нужно использовать только модальный - person Ankr; 24.06.2018