ионная раздвижная рама
ионно-слайд-бокс
Раздвижная рама является составной частью контейнера многостраничного содержит или перетащите переключатель страницы слайд:
Эффект выглядит следующим образом:
использование
<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. |
шоу-пейджера (Необязательно) | 布尔值 | отображается Sliding страницу кадра. |
Пейджер щелчок (Необязательно) | 表达式 | При нажатии на страницу, вызвать выражение (если Шо-пейджера верно). Передает переменную "индекс". |
на слайде измененном (Необязательно) | 表达式 | Когда слайд, вызвать экспрессию. Передает переменную "индекс". |
активный слайд (Необязательно) | 表达式 | Модель привязки к текущему поле слайда. |
примеров
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; })