Ionic Action Sheet

The Action Sheet pops up from the bottom to present options for the user to choose from.

Highly dangerous options are highlighted in red for immediate recognition. You can dismiss it by clicking the cancel button or tapping outside the sheet.

Example

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

To trigger the Action Sheet in your code, you need to use the $ionicActionSheet service within 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: '<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 »

The running effect is shown in the following image:

❮ Ionic Scroll Ionic Icon ❯