Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Ionic, le classi CSS per i pulsanti

Controllare lo stile grafico di un pulsante specificando la classe button e opzionalmente uno dei diversi disponibili con il framework.
Controllare lo stile grafico di un pulsante specificando la classe button e opzionalmente uno dei diversi disponibili con il framework.
Link copiato negli appunti

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:


Ti consigliamo anche