Hello Readers,

In this post we will discuss about $ionicActionSheet service. It is a slide-up pane with various options as per requirement.There are easy way we can close this slide-up pane by hitting Cancel button on it or in desktop escape key on keyboard.

Note: Action sheet opens from bottom of the screen.

Usage:

• To use this functionality we need to create an ionic project first.
• Now, we will inject $ionicActionSheet service into our controller.

For example:

angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope, $ionicActionSheet) {});

To call this slider we need to create a button into our index.html file.

<button class="button button-block  button-balanced" ng-click="clickMe()">click here</button>

Here is the full code:

index.html

<ion-view view-title="Action Sheet">
    <ion-content class="padding">
    <div class="row">
        <div class="col col-50">
            <button class="button button-block  button-balanced" ng-click="clickMe()">click here</button>
        </div>
    </div>
    </ion-content>
</ion-view>

In the above code clickMe() function invokes the $ionicActionSheet.show{()} method to show action sheet.

controller.js

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope, $ionicActionSheet) {
    $scope.clickMe = function()
    {
        var actionSheet = $ionicActionSheet.show({
            buttons: [
                { text: 'Open My Profile' },
                { text: 'Go Back' }
            ],
            destructiveText: 'Remove',
            titleText: 'My Action Sheet',
            cancelText: 'Cancel',
            cssClass: 'demoCss',
            cancel: function() {
                // add cancel code..
            },
            buttonClicked: function(index) {
                return true;
            }
        });
    }
})

In the above js code we have used some parameters of $ionicActionSheet.show() method.

Buttons: It creates an object with text in it. We can make one or more buttons in action sheet.

destructiveText: Text on fatal button on action sheet.

titleText: Text to show title about the action sheet.

cancelText: Text on the cancel button on the sheet.

cssClass: Refers to a custom CSS class to customize action sheet.

cancel function: This function calls when used pressed cancel button. We can do desired operation on cancel button.

buttonClicked: This function is called when we pressed any non fatal button. We can track which button is pressed with the help of index parameter. return true is use to close the sheet when pressed the button and if you want to keep it open then set it to false.

Hope it will help you... :)