How to make a On/Off button in Ionic

2019-02-24 06:24发布

站内问答 / JavaScript
1727 2 4

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.

2条回答
走好不送
2楼-- · 2019-02-24 06:45

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>

查看更多
0人赞 添加讨论(0) 举报
冷血范
3楼-- · 2019-02-24 06:54

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)