Ionic, le classi CSS per i pulsanti

5 ottobre 2015

Possiamo controllare lo stile grafico di un pulsante specificando la classe button ed opzionalmente uno dei diversi colori visti per header e footer. Ad esempio, il seguente codice descrive un pulsante di colore azzurro:

<button class="button button-positive"> 
	button-positive 
</button>

Di default la larghezza di un pulsante dipende dal testo associato. Aggiungendo la classe button-block facciamo in modo che la sua larghezza coincida con quella delll’elemento in cui è contenuto, mentre con la classe button-full il pulsante si adatterà all’intera larghezza dello schermo. La seguente figura mostra nell’ordine i tre esempi di pulsante descritti:

Possiamo controllare le dimensioni generali di un pulsante tramite le classi button-small e button-large:

<button class="button button-positive button-small"> 
	button-positive 
</button> 

Possiamo definire pulsanti:

  • con sfondo trasparente, tramite la classe button-outline ;
  • senza bordi tramite la classe button-clear:
<button class="button button-positive button-outline"> 
	button-positive 
</button> 
<button class="button button-positive button-clear"> 
	button-positive 
</button>

La seguente figura mostra il risultato dell’applicazione di queste classi:

Aggiungere icone ai bottoni

È possibile aggiungere un’icona ad un pulsante indicando specifiche classi che fanno riferimento ad un set di icone fornito con il framework, ma è anche possibile utilizzare set di icone alternative.

Il seguente esempio mostra come visualizzare un pulsante Home con l’icona della casa:

<button class="button icon-left ion-home"> 
	Home 
</button>

La classe icon-left indica la posizione dell’icona all’interno del pulsante, mentre la classe ion-home indica l’icona da visualizzare:

Uno o più pulsanti possono essere raggruppati insieme utilizzando la classe button-bar:

<div class="button-bar bar-positive"> 
	<a class="button">First</a> 
	<a class="button">Second</a> 
	<a class="button">Third</a> 
</div>

Il risultato è mostrato dalla seguente immagine:

Tutte le lezioni

1 ... 5 6 7 ... 29

Se vuoi aggiornamenti su Ionic, le classi CSS per i pulsanti inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Ionic, le classi CSS per i pulsanti

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy