الأيونية إطار انزلاق
ايون الشرائح مربع
انزلاق الإطار هو مكون من وعاء متعدد الصفحات يحتوي، أو اسحب تبديل الشريحة الصفحة:
والنتيجة هي كما يلي:
استعمال
<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; })