Ionic - JavaScript Spde Box

A Spde box contains pages that can be changed by swiping the content screen.

Using Spde Box

The usage of the spde box is simple. You just need to add ion-spde-box as a container and ion-spde with box class inside that container. We will add height and border to our boxes for better visibipty.

HTML Code

<ion-spde-box>

   <ion-spde>
      <span class = "box box1">
         <h1>Box 1</h1>
      </span>
   </ion-spde>

   <ion-spde>
      <span class = "box box2">
         <h1>Box 2</h1>
      </span>
   </ion-spde>

   <ion-spde>
      <span class = "box box3">
         <h1>Box 3</h1>
      </span>
   </ion-spde>

</ion-spde-box>

.box1, box2, box3 {
   height: 300px;
   border: 2px sopd blue;
}

The Output will look as shown in the following screenshot −

We can change the box by dragging the content to the right. We can also drag to the left to show the previous box.

A few attributes that can be used for controlpng spde box behavior are mentioned in the following table.

Delegate Methods

Spde Box Delegate

The $ionicSpdeBoxDelegate is a service used for controlpng all spde boxes. We need to inject it to the controller.

Controller Code

.controller( MyCtrl , function($scope, $ionicSpdeBoxDelegate) {
   $scope.nextSpde = function() {
      $ionicSpdeBoxDelegate.next();
   }
})

HTML Code

<button class = "button button-icon icon ion-navicon" ng-cpck = "nextSpde()"></button>

The following table shows $ionicSpdeBoxDelegate methods.

Delegate Methods