html标签如何与ionic 2操作表一起使用? [英] How to use html tags with ionic 2 action sheets?

问题描述

有一个选项可以在ionic 1中将html标签与操作表一起使用.

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

我在ionic 2中尝试了相同的方法，但是没有用.

I tried the same in ionic 2 but no use.

下面是我的代码.

Below is my code.

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

有人这样做吗?

具体来说，我想在操作表中添加图片

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

推荐答案

否..标题不允许html字符串，任何其他属性也不允许html字符串.

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

最好的选择是在操作表上添加cssClass

Your best bet is add a cssClass on the action sheet

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

这将使您能够区分使用的任何其他操作表，并明确描述css的可维护性.

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

然后您可以通过CSS来偷偷摸摸.因此，操作表中的主要标题类是.action-sheet-title

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

因此，为了在标题旁边添加图片，您只需要在选择器后缀::before或::after

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

例如

.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;
}

应该可以.

这篇关于html标签如何与ionic 2操作表一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！