Ionic-js-slide-box

Ionic-JavaScriptスライドボックス

スライドボックスには、コンテンツ画面をスワイプすることで変更できるページが含まれています。

スライドボックスを使用する

スライドボックスの使い方は簡単です。 ion-slide-box をコンテナとして追加し、 ion-slide をそのコンテナ内のボックスクラスに追加するだけです。 視認性を高めるために、ボックスに高さと境界線を追加します。

HTMLコード

<ion-slide-box>

   <ion-slide>
      <div class = "box box1">
         <h1>Box 1</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box2">
         <h1>Box 2</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box3">
         <h1>Box 3</h1>
      </div>
   </ion-slide>

</ion-slide-box>

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

出力は、次のスクリーンショットに示すようになります-

Ionic Javascript Slide Box 1

コンテンツを右にドラッグして、ボックスを変更できます。 左にドラッグして前のボックスを表示することもできます。

Ionic Javascript Slide Box 2

次の表に、スライドボックスの動作を制御するために使用できるいくつかの属性を示します。

デリゲートメソッド

Attribute	Type	Details
does-continue	Boolean	Should slide box loop when first or last box is reached.
auto-play	Boolean	Should slide box automatically slide.
slide-interval	number	Time value between auto slide changes in milliseconds. Default value is 4000.
show-pager	Boolean	Should pager be visible.
pager-click	expression	Called when a pager is tapped (if pager is visible). *$index *is used to match with different slides.
on-slide-changed	expression	Called when slide is changed.* $index *is used to match with different slides.
active-slide	expression	Used as a model to bind the current slide index to.
delegate-handle	string	Used for slide box identification with* $ionicSlideBoxDelegate*.

スライドボックスデリゲート

*$ ionicSlideBoxDelegate* は、すべてのスライドボックスの制御に使用されるサービスです。 コントローラーに注入する必要があります。

コントローラコード

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
   $scope.nextSlide = function() {
      $ionicSlideBoxDelegate.next();
   }
})

HTMLコード

<button class = "button button-icon icon ion-navicon" ng-click = "nextSlide()"></button>

次の表は、 $ ionicSlideBoxDelegate メソッドを示しています。

デリゲートメソッド

Method	Parameters	Type	Details
slide(parameter1, parameter2)	to, speed	number, number	Parameter to *represents the index to slide to. speed *determines how fast is the change in milliseconds.
enableSlide(parameter1)	shouldEnable	boolean	Used for enambling or disabling sliding.
previous(parameter1)	speed	number	The value in miliseconds the change should take.
stop()	/	/	Used to stop the sliding.
start()	/	/	Used to start the sliding.
currentIndex()	/	number	Returns index of the curent slide.
slidesCount()	/	number	Returns total number of the slides.
$getByHandle(parameter1)	handle	string	Used to connect methods to the particular slide box with the same handle.* $ionicSlideBoxDelegate. $getByHandle('my-handle').start();*