Ionic Framework utilizza AngularJS come framework JavaScript per definire gli elementi dell'interfaccia grafica ed il loro funzionamento interno. La conoscenza delle direttive e dei servizi Angular messi a disposizione da Ionic ci consente di sfruttare a pieno le potenzialità del framework per realizzare applicazioni mobile ibride con un look and feel molto vicino a quelle native.
In questa sezione esploriamo le principali direttive e servizi Angular implementate da Ionic.
ion-content
Come abbiamo avuto modo di vedere quando abbiamo dato un'occhiata al codice HTML dei vari template Ionic, uno degli elementi di base di una view è la direttiva ion-content. Questa direttiva delimita l'area di visualizzazione dei contenuti adattandola alle dimensioni dello schermo corrente e consentendo la personalizzazione dello scrolling.
Il seguente markup definisce un'area il cui contenuto è scrollabile sia orizzontalmente che verticalmente con la visualizzazione delle barre di scorrimento:
<ion-content direction="xy" locking="true" scrollbar-x="true" scrollbar-y="true">
...
</ion-content>Esaminiamo in dettaglio gli attributi principali della direttiva:
| Attributo | Descrizione |
|---|---|
| direction | indica la direzione o le direzioni di scrolling consentite: x indica la direzione orizzontale mentre y quella verticale. |
| locking | indica se lo scrolling è consentito in una direzione per volta (true) o in entrambe le direzioni contemporaneamente (false) |
| scrollbar-x scrollbar-y |
controllano la visualizzazione delle barre di scorrimento per le rispettive direzioni. |
Altri attributi della direttiva consentono di eseguire del codice in corrispondenza dell'evento di scrolling (on-scroll) e quando tale evento è completato (on-scroll-complete), cioè quando l'utente ha terminato l'operazione di scrolling.
ion-scroll
Un'altra direttiva che consente di gestire lo scrolling dei contenuti è ion-scroll:
<ion-scroll direction="xy" style="width:200px; height: 200px">
...
</ion-scroll>La differenza sostanziale tra ion-content e ion-scroll consiste nel fatto che mentre la prima direttiva definisce lo scrolling per l'intera view, la direttiva ion-scroll consente di definire un'area di scrolling di una porzione dello schermo. Per questo motivo vanno indicate le dimensioni dell'area "scrollabile" tramite impostazioni CSS.
