En este momento estás viendo Formularios: Radio buttons en Ionic

Formularios: Radio buttons en Ionic

Podemos utilizar las etiquetas exclusivas para crear Radio buttons en Ionic, de este modo podemos ir utilizando este elemento de los formularios de forma muy sencilla, ya que las antiguas clases no funcionan correctamente.

Para ello, lo único que tenemos que hacer es utilizar la etiqueta ion-radio como vemos en el siguiente ejemplo:

<ion-radio ng-model="choice" ng-value="'A'">Elige A</ion-radio>
<ion-radio ng-model="choice" ng-value="'B'">Elige B</ion-radio>
<ion-radio ng-model="choice" ng-value="'C'">Elige C</ion-radio>

Lo cual nos dará un resultado similar al que vemos a continuación:

radio1

Podemos hacer una lista de elementos utilizando los radio buttons e incluso ponerle cabeceras a los grupos:

<div class="list">
    <div class=" item item-divider">
        Grupo 1
    </div>
    <ion-radio ng-model="choice" ng-value="'D'">Elige D</ion-radio>
    <ion-radio ng-model="choice" ng-value="'E'">Elige E</ion-radio>
    <ion-radio ng-model="choice" ng-value="'F'">Elige F</ion-radio>
    <div class=" item item-divider">
        Grupo 2
    </div>
    <ion-radio ng-model="choice" ng-value="'G'">Elige G</ion-radio>
    <ion-radio ng-model="choice" ng-value="'H'">Elige H</ion-radio>
    <ion-radio ng-model="choice" ng-value="'I'">Elige I</ion-radio>
</div>

Lo cual nos da una lista de radios similar a la que vemos en la siguiente imágen:

radio2

 

Esta entrada tiene 3 comentarios

Deja una respuesta

Responsable » Miguel Ángel López Torralba
Finalidad » Contactar conmigo y enviarte mi contenido.
Legitimación » Tu consentimiento.
Destinatario » MailChimp, mi proveedor de email marketing, que está acogido al acuerdo de seguridad EU-US Privacy.
Derechos » Acceder, rectificar, limitar o suprimir tus datos cuando quieras.