Ionic - Pulsante radio
Radio buttonssono un'altra forma di un elemento, che tratteremo in questo capitolo. La differenza tra i pulsanti di opzione dai moduli di commutazione e casella di controllo è che quando si utilizza il primo, si sceglie solo un pulsante di opzione dall'elenco. Poiché quest'ultimo consente di sceglierne più di uno.
Aggiunta di pulsanti di opzione
Poiché ci sarà sempre più di un pulsante di opzione tra cui scegliere, il modo migliore è creare un elenco. Lo facevamo ogni volta che volevamo più elementi. La classe dell'elemento dell'elenco saràitem-radio. Ancora una volta, useremolabelper questo come abbiamo usato con tutte le altre forme. L'input avrà l'estensionenameattributo. Questo attributo raggrupperà tutti i pulsanti che desideri utilizzare come possibile scelta. Ilitem-contentclass viene utilizzata per visualizzare chiaramente le opzioni. Alla fine, useremo il fileradio-icon class per aggiungere l'icona del segno di spunta che verrà utilizzata per contrassegnare l'opzione scelta dall'utente.
Nell'esempio seguente, ci sono quattro pulsanti di opzione e viene scelto il secondo.
<div class = "list">
<label class = "item item-radio">
<input type = "radio" name = "group1" />
<div class = "item-content">
Choice 1
</div>
<i class = "radio-icon ion-checkmark"></i>
</label>
<label class = "item item-radio">
<input type = "radio" name = "group1" />
<div class = "item-content">
Choice 2
</div>
<i class = "radio-icon ion-checkmark"></i>
</label>
<label class = "item item-radio">
<input type = "radio" name = "group1" />
<div class = "item-content">
Choice 3
</div>
<i class = "radio-icon ion-checkmark"></i>
</label>
<label class = "item item-radio">
<input type = "radio" name = "group1" />
<div class = "item-content">
Choice 4
</div>
<i class = "radio-icon ion-checkmark"></i>
</label>
</div>
Il codice precedente produrrà la seguente schermata:
Più gruppi di pulsanti di opzione
A volte vuoi creare più di un gruppo. Questo è ciò che ilnamel'attributo è fatto per; il seguente esempio raggrupperà i primi due e gli ultimi due pulsanti come due gruppi di opzioni.
Useremo il file item-dividerclasse per separare due gruppi. Si noti che il primo gruppo ha l'estensionename attributo uguale a group1 e il secondo usa group2.
<div class = "list">
<div class = " item item-divider">
Group1
</div>
<label class = "item item-radio">
<input type = "radio" name = "group1" />
<div class = "item-content">
Choice 1
</div>
<i class = "radio-icon ion-checkmark"></i>
</label>
<label class = "item item-radio">
<input type = "radio" name = "group1" />
<div class = "item-content">
Choice 2
</div>
<i class = "radio-icon ion-checkmark"></i>
</label>
<div class = "item item-divider">
Group2
</div>
<label class = "item item-radio">
<input type = "radio" name = "group2" />
<div class = "item-content">
Choice 3
</div>
<i class = "radio-icon ion-checkmark"></i>
</label>
<label class = "item item-radio">
<input type = "radio" name = "group2" />
<div class = "item-content">
Choice 4
</div>
<i class = "radio-icon ion-checkmark"></i>
</label>
</div>
Il codice precedente produrrà la seguente schermata: