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.
Se vuoi aggiornamenti su Development inserisci la tua email nel box qui sotto:
