Ionic ion

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