El mejor tutorial de capa de fondo iónica en 2024. En este tutorial podrás aprender Ejemplos,

capa de fondo iónica

Con frecuencia tenemos la interfaz de usuario, por ejemplo, en el cuadro emergente, caja de carga, aparece otras capas para mostrar u ocultar la capa de fondo.

En el componente puede ser utilizado en ionicBackdrop.retain $ () para mostrar una capa de fondo, un ionicBackdrop.release $ () Ocultar la capa de fondo.

Después de cada llamada a retener, el fondo se mostrará hasta que la liberación de la llamada para eliminar la capa de fondo.


Ejemplos

código HTML

<body ng-app="starter" ng-controller="actionsheetCtl" >
	<ion-pane>
	    <ion-content >
	        <h2 ng-click="action()">$ionicBackdrop</h2>
	    </ion-content>
	</ion-pane>
</body>

código JavaScript

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','$timeout' ,'$ionicBackdrop',function($scope,$timeout,$ionicBackdrop){

    $scope.action = function() {
       $ionicBackdrop.retain();
       $timeout(function() {    //默认让它1秒后消失
         $ionicBackdrop.release();
       }, 1000);
    }; 
}])

Mostrar como se muestra a continuación:

capa de fondo iónica
10/30