Ionic ion-checkbox我们可以将图标更改为另一个图标吗? [英] Ionic ion-checkbox can we change icon with another icon?

问题描述

我们可以从Ionic ion-checkbox更改图标吗?

Can we change icon from Ionic ion-checkbox ?

我们可以使用 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>

谢谢

推荐答案

非常感谢@Atula，我们无法通过ion-checkbox更改图标，

因此，使用css Ionic图标，这是我的解决方案(如果有更好的选择，不客气):

So, with css Ionic icon, here you are my solution (if you have better ? you're welcome) :

请帮助

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

    ...

这篇关于Ionic ion-checkbox我们可以将图标更改为另一个图标吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！