ionique cadre coulissant
ion-slide-box
châssis coulissant est un composant d'un conteneur multi-pages contient, ou faites glisser le commutateur page diapositive:
L'effet est le suivant:
usage
<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
propriété | type | détail |
---|---|---|
délégué poignée (Facultatif) | 字符串 | La poignée avec |
ne-continue (Facultatif) | 布尔值 | Que ce soit coulissante automatique coulisseau de cadre. |
slide-intervalle (Facultatif) | 数字 | Nombre de millisecondes pour attendre le début de la glissière (si elle continue était vrai). La valeur par défaut est 4000. |
show-pager (Facultatif) | 布尔值 | Sliding page de cadre est affiché. |
pager-clic (Facultatif) | 表达式 | Lorsque vous cliquez sur la page, déclencher l'expression (si shou-pager est vrai). Passez une variable "index". |
sur-slide-changé (Facultatif) | 表达式 | Lorsque la diapositive, déclencher l'expression. Passez une variable "index". |
actif-slide (Facultatif) | 表达式 | Le modèle de liaison à la boîte de diapositive en cours. |
Exemples
Le code 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>
code 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%); }
code JavaScript
angular.module('ionicApp', ['ionic']) .controller('SlideController', function($scope) { $scope.myActiveSlide = 1; })