如何使复选框采用了棱角分明+ ionicframework? [英] how to make checkbox using angular + ionicframework?
问题描述
我想就酥料饼的复选框。
我能够做出按钮点击酥料饼,但是当用户选择一个选项,该复选框不会显示。我想,当用户展现这个图像选择一个选项。
用户可以选择与尽可能多的checbboxes多个选项。要显示的复选框我重写它的CSS。
.checkbox,.radio {
宽度:19px;
高度:25像素;
填充:0像素; / *移除填充消除彩色图像周围出血
你可以使图像上的右侧较宽,以获得填充背面* /
背景:网址(http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png)不重复;
显示:块;
明确:左;
浮动:左;
}
您可以只使用离子离子复选框指令
下面的编辑plunkr和编辑酥料饼模板 http://plnkr.co/edit/ Pglgc4lAqfwVuPYmVGac?p = preVIEW
<脚本ID =我-popover.html类型=文/ NG-模板>
<离子酥料饼 - 视图>
<离子标题栏>
< H1类=标题>我酥料饼标题< / H1>
< /离子头吧>
<离子含量>
< UL类=清单NG重复=&GT在轨道由item.name项目;
<离子复选框NG模型=器isChecked> {{item.name}}< /离子复选框>
< /离子含量>
< /离子酥料饼 - 视图>
< / SCRIPT>
如果你仍然想使用自定义的图标,不要忘记使用的纳克级的指令
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.
.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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!