Ionic provides a service named Action Sheet. It will add slide up pane on the bottom of the screen that contains different options.
Using Action Sheet:
If you want to use ionic sheet into your application, then in your controller you have to inject $ionicActionSheet service as a dependency. next, you have to create $scope.showActionSheet() function in your js file and then you will create a button in your HTML template that will call the function that you have created.
Controller Code:
.controller(appCtrl', function($scope, $ionicActionSheet) {
$scope.triggerActionSheet = function() {
// Show the action sheet
var showActionSheet = $ionicActionSheet.show({
buttons: [
{ text: 'Edit 1' },
{ text: 'Edit 2' }
],
destructiveText: 'Delete',
titleText: 'Action Sheet',
cancelText: 'Cancel',
cancel: function() {
// add cancel code...
},
buttonClicked: function(index) {
if(index === 0) {
// add edit 1 code
}
if(index === 1) {
// add edit 2 code
}
},
destructiveButtonClicked: function() {
// add delete code..
}
});
};
})
HTML Code:
<button class = "button">Action Sheet Button</button>
When you click on the Action Sheet Button, it will call the function $ionicActionSheet.show and show action sheet. you can add the functionality of edit buttons inside buttonClicked and for delete button destructiveButtonClicked can be used.
$ionicActionSheet.show() method has different parameters:
buttons: It creates button object with some text field inside.
titleText: It shows the title of action sheet.
cancelText: It is the text for cancel button.
destructiveText: It is text for delete button.
cancel: It is function that is called for cancel button, backdrop or back button.
buttonClicked: It is function called when one of edit buttons is pressed. Index keeps track of which button is tapped. Return true will close the action sheet.
destructiveButtonClicked: It is function called when delete button is pressed. Return true will close the action sheet.
cancelOnStateChange: It is boolean value by default is true. If it is true (default) it will cancel the action sheet when navigating.
0 Comment(s)