ionic slide box
May 22, 2021 ionic
Table of contents
ionic slide box
ion-slide-box
A sliding box is a component of a multi-page container that swipes or drags toggles per page:
The effect diagram is as follows:
Usage
<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
| Property | Type | Details |
|---|---|---|
|
delegate-handle
(Optional)
|
字符串
|
The handle
|
|
does-continue
(Optional)
|
布尔值
|
Whether the slide box slides automatically. |
|
slide-interval
(Optional)
|
数字
|
Wait how many milliseconds to start sliding (true if you continue). The default is 4000. |
|
show-pager
(Optional)
|
布尔值
|
Whether the page of the slide box is displayed. |
|
pager-click
(Optional)
|
表达式
|
When you click on the page, the expression is triggered (if the shou-pager is true). Pass an 'index' variable. |
|
on-slide-changed
(Optional)
|
表达式
|
When sliding, the expression is triggered. Pass an 'index' variable. |
|
active-slide
(Optional)
|
表达式
|
Bind the model to the current slide box. |
HTML code
<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 code
.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 code
angular.module('ionicApp', ['ionic']) .controller('SlideController', function($scope) { $scope.myActiveSlide = 1; })