I'm trying to change the icon on Tab from "ion-social-google-outline" to "ion-social-google" when clicked, but cant figure out how to do it...
I can't use ion-tabs with icon-on, icon-off because I want to navigate within a ion-slide-box and therefor I have to use div class="tabs"
Here is my HTML code:
<div class="tabs tabs-icon-top" ng-controller="NavigateController">
<a class="tab-item" ng-click="navSlide(0)" >
<i class="'icon ion-social-google-outline'"></i>
Google
</a>
<a class="tab-item" ng-click="navSlide(1)">
<i class="icon ion-ios-bolt-outline"></i>
Electro
</a>
</div>
and this is my Controller for navigating between pages in Slide-Box:
angular.module('app.controllers', [])
.controller("NavigateController", function($scope, $ionicSlideBoxDelegate) {
$scope.navSlide = function(index) {
$ionicSlideBoxDelegate.slide(index, 500);
}
});
How do I change the tab icon ?
Here is a example from a app I wrote:
<i style="vertical-align: middle !important; float: left; padding-right: 10px; padding-top: 0px, padding-bottom: 0px;" ng-class="{'ion-qr-scanner': item.Status == 'OPEN', 'stopiconopen': item.Status == 'OPEN', 'ion-checkmark-circled': item.Status == 'ARRIVED', 'stopiconarrived': item.Status == 'ARRIVED'}"></i>
if you look at ng-class
it works like this {'the name of the class you want to apply', : the epxression to be evaluated}
so in your case if icon-on is being toggles true and false you could say
ng-class="{'icon-on-icon': icon-on, 'icon-off-icon': !icon-on}"
The best way to do it would by using the icon-on
and icon-off
attributes inside <ion-tabs>
tag. Much like this:
<ion-tabs>
<ion-tab title="" href="#" icon-on="ion-gear" icon-off="ion-gear-outline">
Tab Name
</ion-tab>
</ion-tabs>
EDIT:
I don't see why not, but I guess if you can't at all, then do something like this:
In your controller:
$scope.$state = $state;
HTML:
<i ng-class="{$state.current.name == 'tab 0': 'ion-ios-gear-outline', $state.current.name !== 'tab 0': 'ion-ios-gear'}"