View Source   Improve this doc

$ionicActionSheet

The Action Sheet is a slide-up pane that lets the user choose from a set of options. Dangerous options are highlighted in red and made obvious.

There are easy ways to cancel out of the action sheet, such as tapping the backdrop or even hitting escape on the keyboard for desktop testing.

Action Sheet

Usage

To trigger an Action Sheet in your code, use the $ionicActionSheet service in your angular controllers:

angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicActionSheet, $timeout) {

 // Triggered on a button click, or some other target
 $scope.show = function() {

   // Show the action sheet
   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;
     }
   });

   // For example's sake, hide the sheet after two seconds
   $timeout(function() {
     hideSheet();
   }, 2000);

 };
});

Methods

show(options)

Load and return a new action sheet.

A new isolated scope will be created for the action sheet and the new element will be appended into the body.

Param Type Details
options object

The options for this ActionSheet. Properties:

  • [Object] buttons Which buttons to show. Each button is an object with a text field.
  • {string} titleText The title to show on the action sheet.
  • {string=} cancelText the text for a 'cancel' button on the action sheet.
  • {string=} destructiveText The text for a 'danger' on the action sheet.
  • {function=} cancel Called if the cancel button is pressed, the backdrop is tapped or the hardware back button is pressed.
  • {function=} buttonClicked Called when one of the non-destructive buttons is clicked, with the index of the button that was clicked and the button object. Return true to close the action sheet, or false to keep it opened.
  • {function=} destructiveButtonClicked Called when the destructive button is clicked. Return true to close the action sheet, or false to keep it opened.
  • {boolean=} cancelOnStateChange Whether to cancel the actionSheet when navigating to a new state. Default true.
  • {string} cssClass The custom CSS class name.
  • Returns: function hideSheet A function which, when called, hides & cancels the action sheet.