menu tarik naik ionik


Menu Tarik Ke Atas (ActionSheet) membolehkan pengguna memilih pilihan melalui kotak pop timbul.

Pilihan yang sangat berbahaya akan diserlahkan dengan warna merah untuk membolehkan orang ramai mengenal pasti mereka dengan segera. Anda boleh menghilangkannya dengan mengklik butang Batal atau mengklik pada ruang kosong.

Contoh

Kod HTML

<body ng-app="starter" ng-controller="actionsheetCtl" >

    <ion-pane>
        <ion-content >
            <h2 ng-click="show()">Action Sheet</h2>
        </ion-content>
    </ion-pane>
</body>

Kod JavaScript

Cetuskan menu lungsur dalam kod dan perlu digunakan dalam pengawal sudut anda Perkhidmatan $ionicActionSheet: 

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

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){
    $scope.show = function() {

        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;
            }
        });

        $timeout(function() {
            hideSheet();
        }, 2000);

    };  
}])


Kesan operasi adalah seperti berikut:

1.gif