问题
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();
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.
Thanks AK
回答1:
You should use backticks to parse the html:
title: `<ion-icon ios="ios-add" md="md-add"></ion-icon>Add your info`
回答2:
If you decide to use a modal, you can make it look like an alert with css.For example:
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";
回答3:
A bit late response. I tried to achieve this today, and I made it like this:
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;
}
These css values can be changed per your requirements.
And in the Alert:
buttons: [
{
text: '',
cssClass: 'yourClass',
handler: data => {}
}
]
来源:https://stackoverflow.com/questions/51001300/ionic2-show-ion-icon-in-alert-controller-title-and-buttons