Un altro elemento molto pratico nelle interfacce utente mobile è la slide box, un contenitore multipagina scorrevole. Ionic implementa questo elemento con la direttiva ion-slide-box, il cui utilizzo di base è mostrato dal seguente markup:
<ion-slide-box>
<ion-slide>
<div>
<h1>La Gioconda</h1>
<img src="img/gioconda.jpg">
</div>
</ion-slide>
<ion-slide>
<div>
<h1>L'urlo</h1>
<img src="img/urlo.jpg">
</div>
</ion-slide>
<ion-slide>
<div>
<h1>Il figlio dell'uomo</h1>
<img src="figliodelluomo.jpg">
</div>
</ion-slide>
</ion-slide-box>Come possiamo vedere, la struttura della direttiva prevede che ciascuna schermata che compone la slide box sia contenuta all'interno della direttiva ion-slide. Nel nostro esempio abbiamo inserito nelle slide l'immagine di famosi dipinti, che verranno visualizzati come mostrato di seguito:
Con il trascinamento delle dita possiamo far scorrere le immagini avanti e indietro.
È prevista la possibilità di controllare il funzionamento della slide box sfruttando alcuni attributi della direttiva ion-slide-box. Ad esempio, possiamo fare in modo che le slide scorrano automaticamente impostando a true il valore dell'attributo auto-play e impostare il tempo di permanenza di ciascuna slide specificando il numero di millisecondi tramite l'attributo slide-interval.
Possiamo far ripartire da capo lo slide show impostando a true l'attributo does-continue e possiamo indicare se visualizzare o meno il pager sotto il contenuto della slide tramite l'attributo show-pager.
È inoltre possibile eseguire del codice JavaScript in corrispondenza del passaggio da una slide alla successiva sfruttando l'attributo on-slide-changed:
<ion-slide-box on-slide-changed="cambioSlide($index)">In questo caso, alla funzione di scope invocata possiamo passare l'indice della slide corrente tramite la variabile $index.
Se per la nostra applicazione abbiamo necessità di controllare la navigazione tra le slide da codice, possiamo ricorrere al servizio $ionicSlideBoxDelegate. Ad esempio, se vogliamo che da una slide si passi alla successiva al tap su di essa, possiamo farlo con il seguente codice:
<ion-slide-box>
<ion-slide>
<div on-tap="vaiAvanti()">
<!-- ... -->
</div>
</ion-slide>
<!-- ... -->
</ion-slide-box>
// ...
myApp.controller("myController", function($scope, $ionicSlideBoxDelegate) {
$scope.vaiAvanti = function() {
$ionicSlideBoxDelegate.next();
};
});I metodi next() e previous() del servizio $ionicSlideBoxDelegate consentono di andare alla slide successiva e precedente con la possibilità di specificare come parametro opzionale la velocità di transizione in millesimi di secondo.
Il servizio prevede anche la possibilità di posizionarsi su una specifica slide tramite il metodo slide() che prevede come parametro obbligatorio l'indice dalla slide su cui posizionarsi e come parametro opzionale la velocità di transizione in millisecondi. Altri metodi consentono di ottenere l'indice della slide corrente (currentIndex()), il numero totale di slide (slidesCount()) o di fermare e far ripartire la navigazione tra le slide (stop() e start()).
