Direttive Angular per Ionic: gestire contenuti

9 novembre 2015

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
directionindica la direzione o le direzioni di scrolling consentite: x indica la direzione orizzontale mentre y quella verticale.
lockingindica 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.

Tutte le lezioni

1 ... 10 11 12 ... 29

Se vuoi aggiornamenti su Direttive Angular per Ionic: gestire contenuti inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Direttive Angular per Ionic: gestire contenuti

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing