Bottoni e menu in Ionic 2

Ionic ci fornisce una vasta libreria di altri componenti per di costruire con estrema semplicità un’interfaccia grafica con un look and feel molto simile a quello di applicazioni mobile native.

Abbiamo, ad esempio, un’ampia scelta tra le modalità di definizione di un pulsante: da semplici pulsanti colorati a pulsanti che si adattano alle dimensioni dello schermo a pulsanti con icone.

Un pulsante colorato può essere definito con il seguente markup:

<button ion-button>Default</button>
<button ion-button color="secondary">Secondary</button>

L’effetto grafico sarà quello mostrato dalla seguente immagine:

Mentre grazie a questo codice possiamo definire pulsanti con icone:

<button ion-button icon-left>
	<ion-icon name='home'></ion-icon>
	Home
</button>
<button ion-button outline icon-left>
	<ion-icon name='briefcase' is-active="false"></ion-icon>
	Work
</button>
<button ion-button clear icon-left>
	<ion-icon name='beer' is-active="false"></ion-icon>
	Pub
</button>

Con la seguente resa grafica:

Confrontando il markup con l’immagine è abbastanza semplice intuire il significato delle direttive Ionic utilizzate.

ion-menu, creare un menu laterale a comparsa

Possiamo definire un menu laterale a comparsa tramite il componente <ion-menu>, come mostrato dal seguente markup:

<ion-menu>
	<ion-header>
		<ion-toolbar>
			<ion-title>Friends</ion-title>
		</ion-toolbar>
	</ion-header>
	<ion-content>
		<ion-list>
			<ion-item>Home</ion-item>
			<ion-item>Friends</ion-item>
			<ion-item>Events</ion-item>
			<ion-item>Close Menu</ion-item>
		</ion-list>
	</ion-content>
</ion-menu>

In esso definiamo l’intestazione del menu, tramite il componente <ion-header>, ed il contenuto, tramite il componente <ion-content>. All’interno di quest’ultimo componente definiamo una lista di elementi che compariranno nel menu.

Per agganciare il menu ad una pagina dell’applicazione utilizziamo la proprietà content, come mostrato di seguito:

<ion-menu [content]="pagina">
	<ion-header>
	<!-- ... -->
	</ion-content>
</ion-menu>
<ion-nav #pagina [root]="rootPage"></ion-nav>

Nell’esempio di codice proposto, abbiamo assegnato alla proprietà content del menu il componente principale di navigazione dell’applicazone (rootPage).

Possiamo inoltre assegnare ad un elemento del menu il compito di chiudere il menu stesso specificando semplicemente la direttiva menuClose, come mostra il seguente esempio:

<ion-item>
	<button ion-button menuClose>Close Menu</button>
</ion-item>

Naturalmente i componenti illustrati sono solo una minima parte delle possibilità offerte dal framework. L’elenco completo dei componenti utilizzabili per creare interfacce grafiche è disponibile sulla documentazione ufficiale di Ionic.