I’d like to add a loading icon inside the message Toast, is it possible?
I tried to add a html tag bit it’s not accepted.
It’d be perfect with ion-spiner
Synchronizing
I’d like to add a loading icon inside the message Toast, is it possible?
I tried to add a html tag bit it’s not accepted.
It’d be perfect with ion-spiner
Synchronizing
Since I’m also looking for exactly same thing, I’d like to know what did you meant with using chips @guadyass?
As @Duveral already explained, you cannot use HTML tags inside message of Toast controller. So, how to do it without hacking into CSS and using animate functions etc?
Hi @eltonfaust and others,
I did not. I would, however, suggest creating own div
element with ion-spinner
and styling it with position absolute and other parameters so that it appears as own Toast. It could look exactly the same if using correct background color, border radious and, eventually, transform for animation style.
You can do using css. Only hack is to find the ionicon variable for icon you want. Refer https://github.com/ionic-team/ionicons/blob/master/scss/_ionicons-variables.scss
Add css class to your toast:
let toast = this.toastCtrl.create({
message: 'You have an urgent notification',
position: 'top',
showCloseButton: true,
closeButtonText: 'View',
cssClass: 'urgent-notification'
});
Add icon before the message
.urgent-notification .toast-message:before {
content: '\f267';
color: black;
display: inline-block;
font-family: "Ionicons";
font-style: normal;
font-weight: bolder;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
padding-right: 10px;
font-size: 2rem;
}
This gives me a triangle, how to put the iOS spinner?