iônica quadro deslizante
ion-slide-box
Deslizando quadro é um componente de um recipiente de várias páginas contém, ou arraste o botão de página de slide:
O efeito é o seguinte:
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
propriedade | tipo | detalhe |
---|---|---|
delegado-handle (Opcional) | 字符串 | O punho com |
faz-continuar (Opcional) | 布尔值 | Se automática de slides quadro deslizante. |
slide-intervalo (Opcional) | 数字 | Quantos milissegundos para aguardar o início da corrediça (se ele continua era verdadeiro). O padrão é 4000. |
show-pager (Opcional) | 布尔值 | Deslizando página quadro é exibido. |
pager-click (Opcional) | 表达式 | Quando você clicar na página, desencadear a expressão (se shou-pager é verdade). Passar um 'index' variável. |
on-slide-mudou (Opcional) | 表达式 | Quando a corrediça, desencadear a expressão. Passar um 'index' variável. |
ativa-slide (Opcional) | 表达式 | O modelo de ligação à caixa de slide atual. |
Exemplos
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; })