Question

我正在使用3.20.0版制作离子应用程序。我正在使用警报控制器，并添加了三个按钮，Annuler，ok和Scan。

我想像下面的照片一样放置它：

我在ionic中的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;
    }

和我显示警告的脚本ionic一样，我需要帮助来显示它像下面的照片

     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

由于我的回答是“非常”，因此“转换为评论”，这是我的回答的转贴。

有些迟到的反应。我今天试图实现这一目标，并且做到了这样：

在app.scss中创建一个CSS类，并将该类添加到警报选项“ 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 => {}
          }
        ]

警报控制器-CSS按钮

1 个答案: