이온 슬라이딩 프레임
이온 슬라이드 상자
여러 페이지 용기의 구성 요소는 프레임을 포함한다 슬라이딩 나 페이지 슬라이드 스위치를 드래그
다음과 같은 효과가 있습니다 :
용법
<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입니다. |
| 쇼 - 호출기 (선택 사항) | 布尔值 | 프레임 페이지를 슬라이딩가 표시됩니다. |
| 호출기 클릭 (선택 사항) | 表达式 | 페이지를 클릭하면 (수오 호출기에 해당하는 경우), 식을 트리거합니다. 에 '인덱스'변수를 전달합니다. |
| 온 - 슬라이드 변경 (선택 사항) | 表达式 | 슬라이드는 표현을 트리거합니다. 에 '인덱스'변수를 전달합니다. |
| 활성 슬라이드 (선택 사항) | 表达式 | 현재 슬라이드 상자 바인딩 모델입니다. |
예
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%);
}
자바 스크립트 코드
angular.module('ionicApp', ['ionic'])
.controller('SlideController', function($scope) {
$scope.myActiveSlide = 1;
})