Ionico - Pulsanti

Esistono diversi tipi di pulsanti in Ionic Framework e questi pulsanti sono leggermente animati, il che migliora ulteriormente l'esperienza dell'utente durante l'utilizzo dell'app. La classe principale per tutti i tipi di pulsanti èbutton. Questa classe sarà sempre applicata ai nostri pulsanti e la useremo come prefisso quando lavoreremo con le sottoclassi.

Pulsanti di blocco

I pulsanti di blocco avranno sempre la larghezza del 100% del loro contenitore principale. Avranno anche una piccola imbottitura applicata. Useraibutton-blockclasse per l'aggiunta di pulsanti di blocco. Se vuoi rimuovere il riempimento ma mantenere l'intera larghezza, puoi usare ilbutton-full classe.

Di seguito è riportato un esempio per mostrare l'utilizzo di entrambe le classi:

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

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

Il codice precedente produrrà la seguente schermata:

Dimensione pulsante

Esistono due classi ioniche per modificare la dimensione del pulsante:

  • button-small e

  • button-large.

Di seguito è riportato un esempio per mostrare il loro utilizzo:

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

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

Il codice precedente produrrà la seguente schermata:

Colori dei pulsanti

Se vuoi dare uno stile al tuo pulsante, devi solo aggiungere la classe di colore appropriata ad esso. Quando modifichi i tuoi elementi, devi aggiungere la tua classe di elementi principale come prefisso alla tua classe di colori. Dato che stiamo disegnando la barra del piè di pagina, la classe del prefisso sarà unbar e la classe di colore che vogliamo usare in questo esempio è assertive (rosso).

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

Il codice precedente produrrà la seguente schermata:

Puoi utilizzare una delle seguenti nove classi per dare un colore a tua scelta ai pulsanti dell'app:

Classe di colore Descrizione Risultato
pulsante-luce Da utilizzare per il colore bianco  
pulsante stabile Da utilizzare per il colore grigio chiaro  
pulsante positivo Da utilizzare per il colore blu  
pulsante-calma Da utilizzare per il colore azzurro  
pulsante bilanciato Da utilizzare per il colore verde  
pulsante eccitato Da utilizzare per il colore giallo  
pulsante-assertivo Da utilizzare per il colore rosso  
pulsante-reale Da utilizzare per il colore viola  
pulsante scuro Da utilizzare per il colore nero  

Pulsante Outline

Se vuoi che i tuoi pulsanti siano trasparenti, puoi applicare button-outlineclasse. I pulsanti di questa classe avranno un bordo di contorno e uno sfondo trasparente.

Per rimuovere il bordo dal pulsante, è possibile utilizzare il button-clearclasse. L'esempio seguente mostra come utilizzare queste due classi.

<button class = "button button-assertive button-outline">
   button-outline
</button>

<button class = "button button-assertive button-clear">
   button-clear
</button>

Il codice precedente produrrà la seguente schermata:

Aggiunta di icone

Quando vuoi aggiungere icone ai tuoi pulsanti, il modo migliore è usare il iconclasse. È possibile posizionare l'icona su un lato del pulsante utilizzando ilicon-left o il icon-right. Di solito vorrai spostare la tua icona da un lato quando hai del testo sopra il tuo pulsante come spiegato di seguito.

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

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

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

Il codice precedente produrrà la seguente schermata:

Barra dei pulsanti

Se vuoi raggruppare un paio di pulsanti insieme, puoi usare il button-barclasse. I pulsanti avranno le stesse dimensioni per impostazione predefinita.

<div class = "button-bar">
   <a class = "button button-positive">1</a>
   <a class = "button button-assertive">2</a>
   <a class = "button button-energized">3</a>
   <a class = "button">4</a>
</div>

Il codice precedente produrrà la seguente schermata: