How to make a On/Off button in Ionic

javascript angularjs ionic-framework ionic

15,165

Solution 1

You may find toggle button useful. Here's the official link to this example:

<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

edit: Here's a demo from Codepen

and the code pasted here:

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {

});

<html ng-app="mySuperApp">
  <head>
    <meta charset="utf-8">
    <title>
      Toggle button
    </title>
    
    <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">
    
    <button class="button button-primary" ng-model="button" ng-click="button.clicked=!button.clicked" ng-class="button.clicked?'button-positive':'button-energized'">
      Confirm
    </button>
  </body>
</html>

Solution 2

In Ionic, you can add class 'active' to a .button, to make it look pressed/active.

And to make only one active at a time, you can do something like this:

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {
  $scope.buttons = [
    {icon: 'beer', text: 'Bars'},
    {icon: 'wineglass', text: 'Wineries'},
    {icon: 'coffee', text: 'Cafés'},
    {icon: 'pizza', text: 'Pizzerias'},
  ];
  $scope.activeButton = 0;
  $scope.setActiveButton = function(index) {
    $scope.activeButton = index;
  };
});

<html ng-app="ionicApp">
  <head>
    <link href="//code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ion-content class="padding">
      
      <div class="button-bar">
          <button 
              ng-repeat="button in buttons" 
              ng-class="{'active': activeButton == $index}" 
              ng-click="setActiveButton($index)"
              class="button icon ion-{{button.icon}}" 
          > 
              {{button.text}}
          </button>
      </div>

    </ion-content>
  </body>
</html>

Also, you can view a demo on Codepen.

15,165

Author by

David Prieto

Computer engineer student from Universidad Simon Bolivar, Venezuela.

Updated on June 12, 2022

Comments

David Prieto almost 2 years
I need to put a button in Ionic that stays activated after it's been pressed, and only deactivates after it's been pressed again.

There is a similar question but it only applies to icon buttons. (How to adding navigation bar button having ionic-on/ ionic-off functionality).

EDIT

I can't use a toggle button, it is required to be a regular looking buttom (in this case an Ionic button-outline) that stays active when pressed.

Here is some code:
```
<div class="botones">
    <div class="row">
      <div class="col">
        <button class="button button-outline button-block button-positive">
          Promociones
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-energized" >
          Aprobados
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-assertive" >
          Alerta
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-balanced" >
          ATM
        </button>
      </div>
    </div>
</div>
```
As you can see is a simple horizontal array of buttons. They suppose to act as filters for a message inbox, so they have to stay pressed (one at the time at most) as the filter is active. Like a tab but not quite.

The main question is, how can I access the activated state of the button so I can mantain it activated.
David Prieto almost 9 years

I already considered it but it can't be that way because of the requirements.
Nikola almost 9 years

Please take a look at my edit. It's rather simple example, but should get you started in the right direction. You can run it here on StackOverflow also, just click the Run code snippet, and you'll see it working as intended.
David Prieto almost 9 years

Awesome, this takes care of the visual part.
Nikola almost 9 years

I'm glad it worked! To be honest I actually just stumbled upon this myself today, so yeah in a way I helped my self too :)