CODEWITHSUNDEEP
htmlionic2
Amruth
Amruth

Reputation: 5912

How to use html tags with ionic 2 action sheets?

There was a option to use html tags with action sheets in ionic 1.

I tried the same in ionic 2 but no use.

Below is my code.

let actionSheet = this.actionSheetCtrl.create({
                title: '<b>Choose</b>',
                buttons: [
                  {}.......

Anyone done this?

Specifically i would like to add an image in the action sheet

Upvotes: 0

Views: 2644

Answers (1)

user1752532
user1752532

Reputation:

No .. the title does not allow for a html string, nor do any of the other properties allow for html strings.

Your best bet is add a cssClass on the action sheet

let actionSheet = this.actionSheetCtrl.create({
            cssClass: 'title-img',

This will allow you to differentiate between any other action sheets you use and explicitly describe the css for maintainability.

You can then get sneaky with the css. So the main title class in the action sheet is .action-sheet-title

So in order to add an image next to the title you just need to suffix the selector with ::before or ::after

for example

.title-img .action-sheet-title::before{ // if you want the image on the left of the title
    background:url('path-to-image-here') no-repeat;
    height: 50px;
    width: 50px;
}

That should work.

Upvotes: 2

Related Questions