Ionic, classi CSS per il layout delle App

28 settembre 2015

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:

ClasseDescrizione
bar-lightsfondo bianco
bar-positivesfondo azzurro
bar-balancedsfondo verde
bar-assertivesfondo 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.

Tutte le lezioni

1 ... 4 5 6 ... 29

Se vuoi aggiornamenti su Ionic, classi CSS per il layout delle App inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Ionic, classi CSS per il layout delle App

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