イオンスライドフレーム
イオンスライドボックス
フレームをスライドさせると容器が含まれている複数ページの構成要素である、またはページのスライドスイッチをドラッグします。
次のような効果があります
使用法
<ion-slide-box on-slide-changed="slideHasChanged($index)"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow"><h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class="box pink"><h1>PINK</h1></div> </ion-slide> </ion-slide-box>
API
プロパティ | タイプ | 詳細 |
---|---|---|
デリゲートハンドル (オプション) | 字符串 | ハンドル |
-続けるん (オプション) | 布尔值 | オートスライドフレームスライドするかどうか。 |
スライド間隔 (オプション) | 数字 | どのように多くのミリ秒単位でスライドの開始を待つ(それが続けば本当でした)。 デフォルトは4000です。 |
ショーページャ (オプション) | 布尔值 | スライディングフレームページが表示されます。 |
ページャクリック (オプション) | 表达式 | あなたがページをクリックすると(寿-ページャがtrueの場合)、式をトリガします。 「インデックス」変数を渡します。 |
上のスライド-変更 (オプション) | 表达式 | スライドは、表現をトリガーする場合。 「インデックス」変数を渡します。 |
アクティブ - スライド (オプション) | 表达式 | 現在のスライドボックスに結合モデル。 |
例
HTMLコード
<ion-slide-box active-slide="myActiveSlide"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow"><h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class="box pink"><h1>PINK</h1></div> </ion-slide> </ion-slide-box>
CSSコード
.slider { height: 100%; } .slider-slide { 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; } .box{ height:100%; } .box h1{ position:relative; top:50%; transform:translateY(-50%); }
JavaScriptコード
angular.module('ionicApp', ['ionic']) .controller('SlideController', function($scope) { $scope.myActiveSlide = 1; })