Ionic Basics Tutorial
Ionic CSS Components
Ionic Javascript Components
Ionic Advanced Concepts
Ionic Useful Resources
Selected Reading
Ionic CSS Components
- Ionic - Padding
- Ionic - Icons
- Ionic - Grid
- Ionic - Tabs
- Ionic - Select
- Ionic - Range
- Ionic - Radio Button
- Ionic - Checkbox
- Ionic - Toggle
- Ionic - Forms
- Ionic - Cards
- Ionic - Lists
- Ionic - Buttons
- Ionic - Footer
- Ionic - Header
- Ionic - Content
- Ionic - Colors
Ionic Javascript Components
- Ionic - JS Tabs
- Ionic - JS Slide Box
- Ionic - JS Side Menu
- Ionic - JS Scroll
- Ionic - JS Popup
- Ionic - JS Popover
- Ionic - JS Navigation
- Ionic - JS Modal
- Ionic - JS Loading
- Ionic - JS List
- Ionic - JS Keyboard
- Ionic - JS Footer
- Ionic - JS Header
- Ionic - JS Events
- Ionic - JS Forms
- Ionic - JS Content
- Ionic - JS Backdrop
- Ionic - JS Action Sheet
Ionic Advanced Concepts
- Ionic - Splash Screen
- Ionic - Media
- Ionic - Geolocation
- Ionic - Native Audio
- Ionic - In App Browser
- Ionic - Facebook
- Ionic - Camera
- Ionic - AdMob
- Ionic - Cordova Integration
Ionic Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Ionic - JS Slide Box
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
Attribute | Type | Details |
---|---|---|
does-continue | Boolean | Should spde box loop when first or last box is reached. |
auto-play | Boolean | Should spde box automatically spde. |
spde-interval | number | Time value between auto spde changes in milpseconds. Default value is 4000. |
show-pager | Boolean | Should pager be visible. |
pager-cpck | expression | Called when a pager is tapped (if pager is visible). $index is used to match with different spdes. |
on-spde-changed | expression | Called when spde is changed. $index is used to match with different spdes. |
active-spde | expression | Used as a model to bind the current spde index to. |
delegate-handle | string | Used for spde box identification with $ionicSpdeBoxDelegate. |
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
Method | Parameters | Type | Details |
---|---|---|---|
spde(parameter1, parameter2) | to, speed | number, number | Parameter to represents the index to spde to. speed determines how fast is the change in milpseconds. |
enableSpde(parameter1) | shouldEnable | boolean | Used for enambpng or disabpng spding. |
previous(parameter1) | speed | number | The value in mipseconds the change should take. |
stop() | / | / | Used to stop the spding. |
start() | / | / | Used to start the spding. |
currentIndex() | / | number | Returns index of the curent spde. |
spdesCount() | / | number | Returns total number of the spdes. |
$getByHandle(parameter1) | handle | string | Used to connect methods to the particular spde box with the same handle. $ionicSpdeBoxDelegate. $getByHandle( my-handle ).start(); |