ionic pull-up menu

May 21, 2021 ionic

ionic pull-up menu (ActionSheet)

The ActionSheet lets the user select options by popping up the box.

Very dangerous options are identified in bright red for the first time. You can make it disappear by clicking the cancel button or by clicking on a blank space.

HTML code

<body ng-app="starter" ng-controller="actionsheetCtl" >

    <ion-pane>
        <ion-content >
            <h2 ng-click="show()">Action Sheet</h2>
        </ion-content>
    </ion-pane>
</body>

JavaScript code

Triggering a pull-up menu in your code requires using the $ionicActionSheet 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: '<b>Share</b> 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);

    };  
}])

Try it out . . .

Here's how it works:

ionic pull-up menu

Table of contents

ionic pull-up menu (ActionSheet)

HTML code

JavaScript code

Cookie Consent