Ion-radio (Radio Button) de 0 a 100

Ion-radio (Radio Button) de 0 a 100
5 (100%) 2 votes

En el tutorial de hoy vamos a hablar un poco más sobre uno de los componentes que más se usa en las aplicaciones. Y no porque lo diga yo, que también, si no por los datos de búsqueda que ofrece Google y viendo las apps también podemos corroborarlo, se trata del ion radio o radio button.

Eyyyy! Muy buenas majo lector y guapa lectora. ¿Qué tal va pasando el fin de semana? Espero que genial. Yo estoy a tope con mis webs y apps porque ahora es cuando hay que aprovechar para tirar la navidad por todo lo alto. Por si no lo sabes, desde septiembre hasta navidad es la mejor época para todo el apartado tecnológico, y sobre todo los que usamos publicidad programática como Admob o Adsense.

Aunque este artículo no estaba preparado para hoy, aquí va. Por que me siento con fuerzas, ansias y muchas ganas de que aprendas a tirar palante con esto de Ionic.

Así que vamos al lio, y a tirar palante que se nos escapa la vida 🙂

¿Qué es un ion radio button o RadioButton?

Pues para quien no lo sepa, se trata de los típicos botones redondos que se agrupan para seleccionar una opción u otra. Vamos a ver un ejemplo antes:

Ion Radio (Radio button)

¿Y ahora? ¿Mejor? Seguro que sí.

Instalación

Este componente no requiere instalación previa. Simplemente podemos usarlo sin problemas llamando a las etiquetas correspondientes. Sigue leyendo.

Configuración

Yeahh! Yujuuuu ¿Qué haces Aitor? Pues nada compañero, simplemente que no requiere configuración tampoco jajajaj. Sigamos.

Como usar un ion-radio o Radio Button

Que mejor opción para entender algo que ver un ejemplo de uso:

 

<ion-list radio-group [(ngModel)]="relationship">
  <ion-item>
    <ion-label>Friends</ion-label>
    <ion-radio value="friends" checked></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Family</ion-label>
    <ion-radio value="family"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Enemies</ion-label>
    <ion-radio value="enemies" [disabled]="isDisabled"></ion-radio>
  </ion-item>
</ion-list>

 

Vale, en primer lugar tenemos que crear un ion-list llamando a la propiedad radio-group (ion radio group) para que la lista tengas este estilo. ¿Por qué? Ya sabes que Ionic trata todos los imputs como ion-item así que es necesario por esto.

Por otro lado, como puedes ver en el código, bindeamos con el campo relationship. En este campo se guardará el valor de lo que hemos seleccionado.

Continuamos creando un ion-item donde vamos a meter el label y el ion-radio para el que estamos trabajando. Esto es muy simple, lo único que hay que destacar es que el ion-radio tiene una etiqueta “value” que es la que se guardará en nuestra variable antes mencionada.

Y Listo, esta sería la estructura de uso para este tipo de componente. Tiene algo más de personalización, pero te lo dejo a tu criterio el seguir investigando.

Propiedades de entrada de ion-radio

Ahora vamos a ver qué tipo de datos nos ofrece este componente cuando un usuario los usa.

  • Checked -> boolean -> Con esta propiedad sabemos que el ion-radio checked está seleccionado o no.
  • Color -> string -> Pues como su nombre indica el color del componente.
  • Disabled -> boolean -> Con esto activamos y desactivamos el botón para su uso.
  • Value -> any -> Nos permite acceder y setear el valor de nuestro ion-radio.

 

Eventos de salida de ion-radio

Como he dicho al principio, este es un componente muy simple. Así que solo tiene un evento de salida.

  • ionSelect -> Es emitido cuando el valor (seleccionado/desseleccionado) cambia.

 

Para los más vaguetes, el tuto en vídeo de la mano de TcRuRav

Bueno lector, pues hasta aquí llega el artículo. No tiene más, su uso es así de simple, sencillo y para toda la familia.

Una cosa más, ¿Te gustan los tutos que voy haciendo de esta manera? O ¿Te gustaría que los hiciera de otra manera? Respóndeme por mail y así, a votación popular, intentaré ir adaptando el blog a tu necesidad, que es la mía también.

Un saludo y nos vemos en el siguiente artículo J

 

Comparte esto en: