- Learn
- Ionic 2, la guida
- Bottoni e menu in Ionic 2
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.
Se vuoi aggiornamenti su AngularJS, JavaScript, mobile inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Bjarne Stroustrup: “Ecco com’è nato C++”
Bjarne Stroustrup, creatore del famosissimo linguaggio di programmazione C++, spiega nell’intervista com’è nata la programmazione orientata agli oggetti. Lo scopo […]