CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
Yasser B.
Yasser B.

Reputation: 835

How to use Button bar as navigation tabs ionic

Using the awesome ionic framework, I'm using the Button bar like the pic below :

enter image description here

But I want when I press a button, it should remain pressed and the others off, and when I press the second, it remains pressed and the others off.

like this :

enter image description here

here is the code : 

<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>

Upvotes: 1

Views: 6735

Answers (3)

Shay
Shay

Reputation: 2100

I would use ng-class to change the button.

Simply make a class of an active button, and then add the logic into it.

<div class="button-bar">
    <a class="button" ng-click="clicked(1)" ng-class="{'active': var == 1}">First</a>
    <a class="button" ng-click="clicked(2)" ng-class="{'active': var == 2}">Second</a>
    <a class="button" ng-click="clicked(3)" ng-class="{'active': var == 3}">Third</a>
</div>

And in the controller:

$scope.clicked = function(num) {
    $scope.var = num;
}

This would make a button 'active' in Angular.

Upvotes: 8

Nikola
Nikola

Reputation: 15038

Here is a working demo from CodePen, copy pasted below. You can run this code example directly here on StackOverflow by clicking the Run code snippet button below.

Note: it's not a generic solution, but should get you moving in the right direction.

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {
  $scope.button = {};
  $scope.button.first = {};
  $scope.button.second = {};
  $scope.button.third = {};
    
  $scope.click = function(button){
    $scope.button.first.clicked = false;
    $scope.button.second.clicked = false;
    $scope.button.third.clicked = false;
    
    button.clicked = true;
  };

});
<html ng-app="mySuperApp">
  <head>
    <meta charset="utf-8">   
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">    
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>    
  </head>
  <body class="padding" ng-controller="MyCtrl">    
    <div class="button-bar">
      <a class="button" ng-model="button.first" ng-click="click(button.first)" ng-class="button.first.clicked?'button-positive':'button-energized'">First</a>
      <a class="button" ng-model="button.second" ng-click="click(button.second)" ng-class="button.second.clicked?'button-positive':'button-energized'">Second</a>
      <a class="button" ng-model="button.third" ng-click="click(button.third)" ng-class="button.third.clicked?'button-positive':'button-energized'">Third</a>
    </div>
  </body>
</html>

edit: In case you would like a leaner solution like the one Shay suggested, you can see the full implementation in Ionic on the CodePen example, pasted below. The main difference is that the clicked function can not be written as he did, and it would produce an error. Anyways, take the solution which suits you best.

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {
  $scope.click = function(num) {
    $scope.var = num;
}

});
<html ng-app="mySuperApp">
  <head>
    <meta charset="utf-8">   
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">    
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>    
  </head>
  <body class="padding" ng-controller="MyCtrl">    
    <div class="button-bar">
      <a class="button" ng-click="click(1)" ng-class="{'button-positive':var==1}">First</a>
      <a class="button" ng-click="click(2)" ng-class="{'button-positive':var==2}">Second</a>
      <a class="button" ng-click="click(3)" ng-class="{'button-positive':var==3}">Third</a>
    </div>
  </body>
</html>

Upvotes: 2

divy3993
divy3993

Reputation: 5810

I think this might help you:

DEMO

HTML

  <a href="#" class="button" id="1">First</a>
  <a href="#" class="button" id="2">Second</a>
  <a href="#" class="button" id="3">Third</a>

CSS

a
{
    text-decoration:none;
}

.button
{
    display:inline-block;
    padding:5px;
    height:20px;
    width:60px;
    text-align:center;
    background:#0CA68F;
    color:white;
}

.active
{
    background:#188171;
}

JS

$("a").click(function()
{
  $(".button").removeClass("active");   
  $("#" + this.id).addClass("active");
});

Upvotes: 0

Related Questions