如何使复选框采用了棱角分明+ ionicframework？

问题描述

我想就酥料饼的复选框。

我能够做出按钮点击酥料饼，但是当用户选择一个选项，该复选框不会显示。我想，当用户展现图像选择一个选项。

用户可以选择与尽可能多的checbboxes多个选项。要显示的复​​选框我重写它的CSS。

  .checkbox，.radio {
    宽度：19px;
    高度：25像素;
    填充：0像素; / *移除填充消除彩色图像​​周围出血
       你可以使图像上的右侧较宽，以获得填充背面* /
    背景：网址（http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png）不重复;
    显示：块;
    明确：左;
    浮动：左;
 }
 

解决方案

您可以只使用离子

下面的编辑plunkr和编辑酥料饼模板

 ＆LT;脚本ID =我-popover.html类型=文/ NG-模板＆GT;
    ＆LT;离子酥料饼 - 视图＆gt;
        ＆LT;离子标题栏＆GT;
            ＆LT; H1类=标题＆gt;我酥料饼标题＆LT; / H1＆GT;
        ＆LT; /离子头吧＆GT;
        ＆LT;离子含量＆GT;
            ＆LT; UL类=清单NG重复=＆GT在轨道由item.name项目;
                ＆LT;离子复选框NG模型=器isChecked＆GT; {{item.name}}＆LT; /离子复选框＆GT;
        ＆LT; /离子含量＆GT;
    ＆LT; /离子酥料饼 - 视图＆gt;
＆LT; / SCRIPT＆GT;
 

如果你仍然想使用自定义的图标，不要忘记使用的

I am trying to make a checkbox on popover.

I am able to make popover on button click but the checkbox does not display when the user selects an option. I want to show this image when the user selects an option.

The user can select multiple option with as many checbboxes. To show the checkbox I overwrite it's css.

plunker

 .checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0px; /* Removed padding to eliminate color bleeding around image
       you could make the image wider on the right to get the padding back */
    background: url("http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png") no-repeat;
    display: block;
    clear: left;
    float: left;
 }

解决方案

You can just use ionic ion-checkbox directive

Here's edited plunkr and edited popover template http://plnkr.co/edit/Pglgc4lAqfwVuPYmVGac?p=preview

<script id="my-popover.html" type="text/ng-template">
    <ion-popover-view>
        <ion-header-bar>
            <h1 class="title">My Popover Title</h1>
        </ion-header-bar>
        <ion-content>
            <ul class="list" ng-repeat="item in a track by item.name">
                <ion-checkbox ng-model="isChecked">{{item.name}}</ion-checkbox>
        </ion-content>
    </ion-popover-view>
</script>

If you still want to use custom icon dont forget to toggle the class of element for example by using ng-class directive

这篇关于如何使复选框采用了棱角分明+ ionicframework？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！