How to make an On / Off button in Ionic
I need to put a button in Ionic that stays activated after it is pressed and only deactivated after it is pressed again.
There is a similar question, but it only applies to icon buttons. ( How to add a navigation bar button with ion on / ion off function ).
EDIT
I can't use the toggle button, it has to be a regular looking buttom (in this case Ionic button-outline) that stays active when clicked.
Here's 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, this is a simple horizontal array of buttons. They believe they are acting as filters for the message mailbox, so they must remain pressed (at least for the time being) because the filter is active. Like a tab, but not really.
The main question is how can I access the activated state of the button so that I can activate it.
source to share
You may find the toggle button useful. Here is the official link for 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 is 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>
source to share
In Ionic, you can add an active class to the .button to make it appear clicked / 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>
Alternatively, you can view a demo on Codepen .
source to share