Menu
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.
360
Toggles can be switched on or off by pressing or swiping them. They can also be checked programmatically by setting the checked property.
A color can be applied to an Ionic component in order to change the default colors using the color attribute. Notice in the buttons below that the text and background changes based on the color set. When there is no color set on the button it uses the primary color by default.
Slap ion-toggle-text on any existing ion-toggle and you're good to go. On/off text can be set with either the ng-true-value / ng-false-value attributes or with a ; separated value with the ion-toggle-text attribute. If no text is provided it defaults to "on" & "off". Plunker can be found here.
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.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
