Se devo realizzare una scelta mediante radio button a video con Instant Developer Cloud posso utilizzare l’elemento IonRadio del componente IonicUI.
Questo elemento va inserito in un IonItem che a sua volta andrà inserito all’interno di un elemento IonList. Quest’ultimo dovrà contenenre tutti gli IonRadio che fanno parte dello stesso gruppo in modo che uno solo sia selezionabile.
Nell’elemento IonItem ho aggiunto anche un elemento IonIcon per complicare un po’ la cosa.
Se poi ho degli altri elementi a video avrò anche un secondo IonList con dentro altri elementi e potrei trovarmi ad avere questa videata:
Non è bellissima a vedersi e poi se la visualizzo su un dispositivo più grande vorrei che i radio button fossero sulla stessa riga e non uno sotto l’alto. Come posso fare?
Io l’ho fatto con il CSS in questo modo:
ion-list.my-list-radio .item .item-inner {
border-bottom: 0px;
}
ion-list.my-list-radio>.item-wrapper .item, ion-list.my-list-radio>.item {
border-bottom: 1px solid #dedede;
}
.my-list-radio{
display: flex;
margin: 0;
}
@media only screen and (max-width: 400px) {
.my-list-radio{
display: block;
}
}*testo in corsivo*
.my-list {
margin: 0;
}
ion-list.my-list>.item-wrapper:first-child .item, ion-list.my-list>.item:first-child {
border-top: 0px;
}
La classe my-list-radio è associata all’elemento IonList che contiene i radio button.
La classe my-list è associata ad un secondo elemento IonList che contiene i campi Valore uno e Valore due.
La media query che imposta il display: block serve a far si che radio button si dispongano in una sola riga in caso di dispositivo largo.
Tutte le altre direttive tolgono i bordi dove non servono e li ho aggiunti solo all’elemento item che sta dentro all’elemento IonList che ha la classe my-list-radio.
Inoltre ho tolto il bordo sopra al primo figlio dell’elemento IonList con classe my-list.
Per evitare troncature di testo gli IonItem dei radio button hanno la proprietà WrapText = true e la proprietà Wrapper = false.
Per chi è molto bravo nell’utilizzo del CSS magari questa cosa può risultare banale ma per tutti gli altri magari è utile.
Il risultato finale è questo:
