cuadro móvil iónica
ión-slide-box
marco de deslizamiento es un componente de un recipiente de múltiples páginas contiene, o arrastre el interruptor deslizante página:
El efecto es el siguiente:
uso
<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
| propiedad | tipo | detalle |
|---|---|---|
| delegado mango (Opcional) | 字符串 | El mango con |
| no-seguir (Opcional) | 布尔值 | Ya sea automático de diapositivas cuadro móvil. |
| deslizable intervalo (Opcional) | 数字 | ¿Cuántos milisegundos de espera para el inicio de la corredera (si continúa era verdad). El valor predeterminado es 4000. |
| show-localizador (Opcional) | 布尔值 | Se muestra deslizante de marco de página. |
| localizador clic (Opcional) | 表达式 | Al hacer clic en la página, desencadenar la expresión (si shou-localizador es cierto). Pasar una variable de "índice". |
| en diapositiva-cambiado (Opcional) | 表达式 | Cuando la corredera, a desencadenar la expresión. Pasar una variable de "índice". |
| -activa de diapositivas (Opcional) | 表达式 | El modelo de unión a la caja de diapositiva actual. |
Ejemplos
código 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>
código 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%);
}
código JavaScript
angular.module('ionicApp', ['ionic'])
.controller('SlideController', function($scope) {
$scope.myActiveSlide = 1;
})