อิออนเลื่อนกรอบ
ไอออนสไลด์กล่อง
กรอบบานเลื่อนเป็นส่วนประกอบของภาชนะหลายหน้ามีหรือลากเปลี่ยนสไลด์หน้า:
ผลจะเป็นดังนี้:
การใช้
<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 |
แสดงเพจเจอร์ (อุปกรณ์เสริม) | 布尔值 | เลื่อนหน้ากรอบจะปรากฏขึ้น |
เพจเจอร์คลิก (อุปกรณ์เสริม) | 表达式 | เมื่อคุณคลิกหน้าเรียกการแสดงออก (ถ้า Shou เพจเจอร์เป็นความจริง) ผ่านการ 'ดัชนี' ตัวแปร |
บนสไลด์เปลี่ยน (อุปกรณ์เสริม) | 表达式 | เมื่อภาพนิ่งเรียกการแสดงออก ผ่านการ 'ดัชนี' ตัวแปร |
ใช้งานสไลด์ (อุปกรณ์เสริม) | 表达式 | ผูกพันรูปแบบในปัจจุบันกล่องสไลด์ |
ตัวอย่าง
โค้ด 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; })