Контроллер оповещений - кнопка css

Question

Я делаю ионное приложение с версией 3.20.0. Я использую контроллер предупреждений и добавляю три кнопки: Annuler, ok и Scan.

Я хочу разместить его как на фото ниже:

мой код CSS в ионном, как это:

 .myalert .alert-wrapper {
        padding: 0;
        flex-wrap: wrap;

        input.alert-input:nth-child(1){
            flex: 0 0 60%;
            max-width: 80%;
        }
     button.alert-button:nth-child(1) {
        background-image:url('../assets/imgs/icon.png');
        background-repeat: no-repeat;
        background-position: center;
        max-width: 40%;
    }  
    }
    .myalert button.alert-button-group {
        flex: 0 0 50%;
        max-width: 50%;

    }

    .myalert .alert-button-group-vertical {
      flex-direction: row;
    }

и мой скрипт для показа оповещений выглядит так, мне нужна помощь, чтобы показать его как на фото ниже

     showPrompt() {
    this.donebtn = true;
    let prompt = this.alertCtrl.create({
      title: 'Espace Client',
      message: "Tapez votre code secret",
      cssClass: 'myalert',
      inputs: [{
        name: 'code',
        placeholder: 'Mot de passe',
        type: 'password',
      }, ],
      buttons: [{
        text: '',
        handler: data => {
          this.scannerCAB();
          let pass = this.votreCode;
          this.verifierclient(this.codeclient, pass);

          // console.log('Barcode data', this.votreCode);
          // let pass = data.code;
          //this.verifierclient(this.codeclient, pass);
        }
      },{
          text: 'Annuler ',
          handler: data => {

          }

        },

        {
          text: 'ok ',
          handler: data => {
            let pass = data.code;
            this.verifierclient(this.codeclient, pass);
          }
        },
      ]
    });
prompt.present({
    keyboardClose: false
  })
  .then(() => this.donebtn = false);

}

Answer 1

Поскольку мой ответ был «тривиальным», а значит, «преобразованным в комментарий», вот перепост моего ответа.

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

Создайте класс 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 => {}
          }
        ]