CODEWITHSUNDEEP
cssangularjsionic-framework
Anuj
Anuj

Reputation: 650

Ionic Tab active color

I am working on Ionic Tab .I want to show color of my ionic tab blue at starting on view tab .it is working but after click on edit password blue color is displaying on Edit Password but not removing from view tab.Again clicking on view button then everything is working fine . I created Codepen for that [http://codepen.io/anujsphinx/pen/WopBLv] check

Upvotes: 1

Views: 1284

Answers (3)

user5397525
user5397525

Reputation:

I have corrected your codepen and it works, but the changes where many:

  • First of all. The use of !important, as other classes suggest, is not a good idea. When you use important, everyting else is overridden and this will cause problems in finding why some classes do not apply to all the elements etc (take a look at this answer that describes the problems caused from !important use ). !Important must be used with caution and avoided if possible, and in this case, it is possible.

  • I corrected the ids at tab items: you should never use the same id for two elements!:

    <a id="id_view" class="tab-item" ng-click="activeButton = 'a'; showme=false" ng-class="{ 'my_active': activeButton === 'a' }">
     <i class="icon ion-android-people" ></i> View
 </a>
 <a id="id_password" class="tab-item" ng-click="activeButton = 'b'; showme=true" ng-class="{ 'my_active': activeButton === 'b' }">
     <i class="icon ion-gear-a"></i> Edit Password
 </a>

  • You don't need two classes. You need the active class. I call it my_active. The ng-class="{ 'my_active': activeButton === 'a' } attribute watches the value of the activeButton variable, and if it is equal to 'a', then the element has the my_active class. If not, the element has no class, so it is displayed in it's inactive color. In the same way works the ng-class="{ 'my_active': activeButton === 'b' .

  • For initializing the active element as the View button, you only need this line in the controller: $scope.activeButton='a'; You don't need to access Ids. Avoid accessing elements with ionic and angular. Variables used in view and changed by controller can give you the same result in a safe and reliable way.

Upvotes: 2

S.M.Priya
S.M.Priya

Reputation: 364

Check with the following code, I have used active function here,

HTML

<ion-content>
   <div class="tabs tabs-dark tabs-icon-top static">
      <a  class="tab-item " ng-class="{'myactive': isActive1({{1}})}"  ng-click="FunctionCall1(1)">
        <i class="icon ion-android-people" ></i> View
      </a>
      <a  class="tab-item" ng-class="{'myactive': isActive2({{2}})}"  ng-click="FunctionCall2(2)">
        <i class="icon ion-gear-a"></i> Edit Password
      </a>
   </div>
 </ion-content>

CSS:

.myactive{
  background-color: #3166A2 !important;
}

CONTROLLER:

 $scope.$on('$ionicView.enter', function() {
    $scope.active1=1;
    $scope.FunctionCall1=function(val){
       $scope.active1=val;
       $scope.active2='';
    }

    $scope.FunctionCall2=function(val){
       $scope.active2=val;
       $scope.active1='';
    }

    $scope.isActive1 = function(type) {
        return type === $scope.active1;
    };

    $scope.isActive2 = function(type) {
        return type === $scope.active2;
    };
});

Hope this will helps you !!!!!

Upvotes: 0

Mourad Idrissi
Mourad Idrissi

Reputation: 3775

1) you should create two css classes : active and inactive

.myactive{
  background-color: #3166A2 !important;
}
.myinactive{
  background-color: #0a0a0a !important;
}

2) you add 'id' property to each link

<a id="myId" class="tab-item " ng-click="activeButton = 'a'; showme=false" ng-class="{ 'myactive': activeButton === 'a' }">
    <i class="icon ion-android-people" ></i> View
</a>

3) you set active class to view tab in the controller:

angular.element(document.querySelector('#myId')).addClass('myactive');

4) you create a function that switch between both classes and you call it using ng-click:

var myFunction = function(thisId){
    angular.element(document.querySelector('#thisId')).addClass('myactive');
    angular.element(document.querySelector('#otherId')).addClass('myinactive');
}

Hope that helps u :)

Upvotes: 1

Related Questions