Ionic Sliding Frame

From WikiOD

Ionic sliding frame[edit | edit source]


Ion-slide-box[edit | edit source]

The sliding box is a component that contains a multi-page container. Each page slides or drags to switch:

The renderings are as follows:

Usage[edit | edit source]
 <ion-slide-box on-slide-changed="slideHasChanged($index)">
   <ion-slide>
     <code><div class="box blue"><h1>BLUE</h1></code><code></div></code>
   </ion-slide>
   <ion-slide>
     <code><div class="box yellow"><h1>YELLOW</h1></code><code></div></code>
   </ion-slide>
   <ion-slide>
     <code><div class="box pink"><h1>PINK</h1></code><code></div></code>
   </ion-slide>
 </ion-slide-box>
API[edit | edit source]
Attributes Type Details
delegate-handle

(Optional)

String With the handle $ionicSlideBoxDelegateidentifying the sliding block.
does-continue

(Optional)

Boolean value Whether the sliding frame slides automatically.
slide-interval

(Optional)

number How many milliseconds to wait to start sliding (true if it continues). The default is 4000.
show-pager

(Optional)

Boolean value Whether the page of the sliding box is displayed.
pager-click

(Optional)

expression When the page is clicked, the expression is triggered (if shou-pager is true). Pass an'index' variable.
on-slide-changed

(Optional)

expression When sliding, trigger the expression. Pass an'index' variable.
active-slide

(Optional)

expression Bind the model to the current sliding box.

Instance[edit | edit source]

HTML code[edit | edit source]
 <ion-slide-box active-slide="myActiveSlide">
 	<ion-slide>
 	  <code><div class="box blue"><h1>BLUE</h1></code><code></div></code>
 	</ion-slide>
 	<ion-slide>
 	  <code><div class="box yellow"><h1>YELLOW</h1></code><code></div></code>
 	</ion-slide>
 	<ion-slide>
 	  <code><div class="box pink"><h1>PINK</h1></code><code></div></code>
 	</ion-slide>
 </ion-slide-box>
CSS code[edit | edit source]
 .slider {
   height: 100%;
 }
 .slider-slide {
   padding-top: 80px;
   color: #000;
   background-color: #fff;
   text-align: center;
 
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
 }
 
 .blue {
   background-color: blue;
 }
 
 .yellow {
   background-color: yellow;
 }
 
 .pink {
   background-color: pink;
 }
Java Script code[edit | edit source]
 angular.module('ionicApp', ['ionic'])
 
 .controller('SlideController', function($scope) {
   
   $scope.myActiveSlide = 1;
   
 })