Ionic - Cara menggunakan Action Sheet

Ionic - Cara menggunakan Action Sheet

Sample Action Sheet

Action Sheet adalah layanan Ionic yang akan memicu geser panel di bagian bawah layar yang dapat Anda gunakan untuk berbagai keperluan.

Berikut Cara pemakainnya :

Tambahkan pada js

.controller('ActionSheetCtrl', 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..
         }
      });
   };
})

Tambahkan pada view html Anda:

<button class = "button" ng-click="triggerActionSheet()">Action Sheet Button</button>

jangan lupa untuk menambahkan triggerActionSheet() untuk memanggil fungsi yang sudah kita buat diatas.

Show method options

Properties	Type	Details
buttons	object	Creates button object with a text field.
titleText	string	The title of the action sheet.
cancelText	string	The text for cancel button.
destructiveText	string	The text for a destructive button.
cancel	function	Called when cancel button, backdrop or hardware back button is pressed.
buttonClicked	function	Called when one of the buttons is tapped. Index is used for keeping track of which button is tapped. Return true will close the action sheet.
destructiveButtonClicked	function	Called when destructive button is clicked. Return true will close the action sheet.
cancelOnStateChange	boolean	If true (default) it will cancel the action sheet when navigation state is changed.