Ionic - Backdrop

Ionic - Backdrop. Show dan hide backdrop UI. Seringkali, beberapa komponen UI membutuhkan backdrop.  Backdrop akan membuat layar menjadi gelap seperti akan menampilkan popup atau semacamnya.

Ada dua mehod yang dapat digunakan untuk backdrop :

• $ionicBackdrop.retain() akan mengaktifkan backdrop
• $ionicBackdrop.release() backdrop akan hilang

Berikut Cara penggunaanya :

Pada js:

.controller('BackdropCtrl',function($scope,$ionicBackdrop, $timeout){
  $scope.showBackdrop = function() {
    $ionicBackdrop.retain();
 
    $timeout(function() {
     $ionicBackdrop.release();
   }, 3000);
  };
    // Execute action on backdrop disappearing
    $scope.$on('backdrop.hidden', function() {
    // Execute action
    alert('hidden bro');
  });
  // Execute action on backdrop appearing
  $scope.$on('backdrop.shown', function() {
    // Execute action
    alert('show bro!')
  });
})

Pada html viewnya:

<ion-view view-title="Backdrop">
<ion-content class="padding">
<p>Backdrop Page</p>
<button class="button" ng-click="showBackdrop()">Show Backdrop</button>
</ion-content>
</ion-view>

Hasilnya sebagai berikut: 

backdrop awal

backdrop show

backdrop aktif

backdrop hidden

Mudah bukan? :D

Sekian untuk malam ini. Nantikan beberapa kemudahan berikutnya :)