Ionic ion-checkbox我们可以用另一个图标更改图标吗?(Ionic ion-checkbox can we change icon with another icon?)
我们可以从Ionic ion-checkbox更改图标吗?
我们可以使用http://ionicons.com/吗?
现在,这里是我的代码:
<ion-view> <ion-content class="has-header"> <ion-list> <ion-checkbox class="item-checkbox-right">item 1</ion-checkbox> <ion-checkbox class="item-checkbox-right">item 2</ion-checkbox> <ion-checkbox class="item-checkbox-right">item 3</ion-checkbox>谢谢
Can we change icon from Ionic ion-checkbox ?
Can we use http://ionicons.com/ ?
for now, here my code :
<ion-view> <ion-content class="has-header"> <ion-list> <ion-checkbox class="item-checkbox-right">item 1</ion-checkbox> <ion-checkbox class="item-checkbox-right">item 2</ion-checkbox> <ion-checkbox class="item-checkbox-right">item 3</ion-checkbox>Thank you
最满意答案
非常感谢@Atula,我们无法从离子复选框中更改图标,
所以,使用css Ionic图标,在这里你是我的解决方案(如果你有更好的?欢迎你):
请帮忙
HTML
<ion-view> <ion-content class="has-header"> <div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item1')"> <label>Item1</label><!-- white space --><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item1']}}"></i></div> </div> <div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item2')"> <label>Item2</label><!-- white space --><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item2']}}"></i></div> </div> </ion-content> </ion-view>SCSS
#frameCheckboxHome{ width: 100%; border-bottom: lightgrey solid 1px; padding-top: 10px; padding-bottom: 10px; label{ width: 80%; margin: 0px; vertical-align: middle; padding-left: 10px; } div{ width: 20%; margin: 0px; vertical-align: middle; display: inline-block; text-align: center; } div i{ color: lightgrey; font-size: 36px; } .selected { color: orange; } }js与角流星1.3离子
class Home { constructor($scope, $reactive) { 'ngInject'; $reactive(this).attach($scope); this.myTab = []; } toggle(param){ !this.myTab[param] ? this.myTab[param] = "selected" : this.myTab[param] = ""; } } ... .component(name, { templateUrl: `imports/ui/components/${name}/${template}.html`, controllerAs: 'homeCtrl', controller: Home }) ...Big Thank You @Atula, we cannot change icon from ion-checkbox,
So, with css Ionic icon, here you are my solution (if you have better ? you're welcome) :
Please, help
html
<ion-view> <ion-content class="has-header"> <div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item1')"> <label>Item1</label><!-- white space --><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item1']}}"></i></div> </div> <div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item2')"> <label>Item2</label><!-- white space --><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item2']}}"></i></div> </div> </ion-content> </ion-view>scss
#frameCheckboxHome{ width: 100%; border-bottom: lightgrey solid 1px; padding-top: 10px; padding-bottom: 10px; label{ width: 80%; margin: 0px; vertical-align: middle; padding-left: 10px; } div{ width: 20%; margin: 0px; vertical-align: middle; display: inline-block; text-align: center; } div i{ color: lightgrey; font-size: 36px; } .selected { color: orange; } }js with angular meteor 1.3 Ionic
class Home { constructor($scope, $reactive) { 'ngInject'; $reactive(this).attach($scope); this.myTab = []; } toggle(param){ !this.myTab[param] ? this.myTab[param] = "selected" : this.myTab[param] = ""; } } ... .component(name, { templateUrl: `imports/ui/components/${name}/${template}.html`, controllerAs: 'homeCtrl', controller: Home }) ...更多推荐
发布评论