Ionic Pull-Up Menu

From WikiOD

Ionic pull-up menu (Action Sheet)[edit | edit source]

The pull-up menu (Action Sheet) allows the user to select options through a pop-up box.

Very dangerous options will be highlighted in red for the first time recognition. You can make it disappear by clicking the cancel button or clicking on a blank space.


Instance[edit | edit source]

HTML code[edit | edit source]
 <body ng-app="starter" ng-controller="actionsheetCtl">
 
     <ion-pane>
         <ion-content>
             <code><h2 ng-click="show()">Action Sheet</h2></code>
         </ion-content>
     </ion-pane>
 </body>
JavaScript code[edit | edit source]

To trigger the pull-up menu in the code, you need to use the $ionicActionSheet service in your angular controller:

 angular.module('starter', ['ionic'])
 
 .run(function($ionicPlatform) {
   $ionicPlatform.ready(function() {
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
     // for form inputs)
     if(window.cordova && window.cordova.plugins.Keyboard) {
       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
     }
     if(window.StatusBar) {
       StatusBar.styleDefault();
     }
   });
 })
 
 .controller('actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){
     $scope.show = function() {
 
         var hideSheet = $ionicActionSheet.show({
             buttons: [
               {text:'<code><b>Share</b></code> This' },
               {text:'Move'}
             ],
             destructiveText:'Delete',
             titleText:'Modify your album',
             cancelText:'Cancel',
             cancel: function() {
                  // add cancel code..
                },
             buttonClicked: function(index) {
               return true;
             }
         });
 
         $timeout(function() {
             hideSheet();
         }, 2000);
 
     };  
 }])