Introducendo Ionic abbiamo detto che esso può essere considerato il Bootstrap delle applicazioni ibride. Infatti, allo stesso modo di Bootstrap, Ionic ci mette a disposizione una serie di classi CSS predefinite per consentire una rapida definizione della grafica di un'interfaccia.
Consideriamo ad esempio la definizione degli elementi di base di un layout, nel caso non volessimo utilizzare quello fornito da uno starter template o volessimo semplicemente modificarlo.
Un classico layout prevede:
- header;
- content area;
- footer.
header
Possiamo definire un header, cioè un'area dell'interfaccia posizionata sulla parte alta dello schermo, tramite un <div> con classi CSS bar bar-header, come nel seguente esempio:
<div class="bar bar-header bar-dark">
<h1 class="title">bar-dark</h1>
</div>Nell'esempio abbiamo anche specificato il colore dello sfondo dell'header tramite la classe bar-dark. Il risultato sarà simile a quello mostrato dalla seguente figura:
Tra le altre possibilità di dare un colore di sfondo all'header segnaliamo:
| Classe | Descrizione |
|---|---|
| bar-light | sfondo bianco |
| bar-positive | sfondo azzurro |
| bar-balanced | sfondo verde |
| bar-assertive | sfondo rosso |
I nomi light, positive, balanced, etc. delle classi CSS li ritroveremo per la definizione dei colori degli altri elementi dell'interfaccia grafica e possono naturalmente essere ridefiniti a nostro piacimento.
Possiamo anche aggiungere dei pulsanti nell'header scrivendo il seguente codice:
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>Otterremo un risultato analogo a quello della seguente immagine:
Se abbiamo bisogno di un header di secondo livello possiamo crearlo specificando la classe bar-subheader:
<div class="bar bar-header">
<h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
<h1 class="title">Sub Header</h1>
</div>footer
Per definire un footer, cioè un'area dell'interfaccia posizionata nella parte bassa dello schermo, possiamo utilizzare la classe bar-footer con le analoghe impostazioni viste per l'header:
<div class="bar bar-footer bar-dark">
<h1 class="title">Questo è un footer</h1>
</div>content area
L'area centrale compresa tra header e footer ospita i contenuti dell'applicazione. Ionic consente di gestire quest'area come una view scrollabile tramite la direttiva ion-content:
<ion-content>
<div>Qui va il contenuto</div>
</ion-content>È possibile configurare quest'area sfruttando i diversi attributi che consentono di definire la direzione dello scrolling, la visualizzazione della barra di scorrimento, la posizione iniziale della barra di scorrimento, etc.
Ad esempio, il seguente codice definisce un'area scrollabile orizzontalmente che carica dinamicamente il contenuto man mano che viene effettuato lo scrolling:
<ion-content direction="x" on-scroll-complete="loadNewContent()">
....
</ion-content>Come possiamo vedere, la direzione è definita dall'attributo direction, che può assumere i valori x (orizzontale) e y (verticale), mentre l'attributo on-scroll-complete consente di definire l'espressione AngularJS da valutare quando lo scrolling è completo.
