January 8, 2016

Ionic Action Sheet

Ionic Action Sheet : Action Sheet is a slide-up pane which enables users to select one option from set of options. You can easily close the Action sheet by clicking on the backdrop or using escape key. Here we are going to explain the method to create Action Sheet in ionic framework with example and demo.

Ionic Action Sheet Example

Here we have created simple button and added event to create Action Sheet when clicked on it.

Ionic Action Sheet

.controller('MainCtrl', function($scope, $ionicActionSheet) { 
// Is Triggered on a button click or on other event.
 $scope.myAcSheet = function() {

   // Show the action sheet
   var hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: 'Btn1- Like This' },
       { text: 'Btn2- Comment' }
     ],
     destructiveText: 'Delete',
     titleText: 'Edit Profile',
     cancelText: 'Cancel',
     cancel: function() {
          // add cancel code..
        },
     buttonClicked: function(index) {
       if(index === 0){
	   // code for button 1 
	   }
	   if(index === 1){
	     // code for button 2
	   }
     }
   });
   
 };

  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });

Try it »

In the above example first bind the $ionicActionSheet service with the controller which is required for Action sheet event and then created function $scope.myAcSheet(); which will trigger the pan with specified options.

Now let us call the created function in Html code.

Call Ionic Action Sheet Function

Now call the created function myAcSheet() on button click to trigger the event.

Call Action Sheet In Ioinc

<button type="button" ng-click="myAcSheet()" >Action Sheet</button>

If you run the above example it will produce the following output –

Ionic Action Sheet Example

Action Sheet Methods

Here are following methods available in Action Sheet –

buttons(Object)– Used to create buttons to show with a text field. Each button is an object.
titleText(string)– This is string used to add the title of the action sheet.
cancelText(string=)– This is string used to add text for ‘cancel’ button.
destructiveText(string=)– The text for a ‘danger’ on the action sheet.
cancel(function=)– This function is Called on cancel button is pressed or the backdrop is tapped or the hardware back button is pressed.
buttonClicked(function=)– This function is Called when one of the non-destructive buttons is clicked , Buttons are identified by the index.
destructiveButtonClicked(function=)– This is function Called when the destructive button is clicked. Return true to close the action sheet and false to keep it opened.
cancelOnStateChange(boolean=)– This is boolean and used to cancel the action sheet on the basis of navigation state change.
cssClass(string)-This is string to add custom CSS class.

Ionic Action Sheet