Tema 7

Tema 7
Diseño y Desarrollo de Aplicaciones para Móviles
Componentes IONIC:
Progress indicators
Índice
Esquema 3
Ideas clave 4
7.1. Introducción y objetivos 4
7.2. ion-loading 5
7.3. ion-progress-bar 6
7.4. ion-spinner 10
7.5. ion-range 12
© Universidad Internacional de La Rioja (UNIR)
7.6. ion-radio 17
7.7. ion-refresher 20
7.8. ion-refresher-content 22
7.9. ion-reorder 26
A fondo 31
Test 35
Esquema

3
Tema 7. Esquema
Ideas clave
7.1. Introducción y objetivos
En este tema de la asignatura de Diseño y Desarrollo de Aplicaciones para Móviles,

vamos a continuar con los componentes disponibles en el framework de IONIC. En
este tema y en el siguiente vamos a ver una serie de componentes que sirven para
denotar un progreso o espera.
Todo lo que aquí se explica está desarrollado y publicado en un repositorio público,

que se deja para que los alumnos puedan interactuar y jugar con el código para
familiarizarse con él antes de desarrollar el código propio.
Accede al repositorio público desde el aula virtual o a través del siguiente enlace:
https://bitbucket.org/muchachodry/ionic-base-app/src/master/
En este tema vamos a tener unos objetivos más específicos:
 Comprender y aplicar el componente ion-loading.

 Incluir en las aplicaciones el componente ion-progress-bar.
 Comprender y añadir un componente ion-spinner.
 Aplicar el componente ion-range.
 Incluir en aplicaciones multiplataforma el componente ion-radio.
 Comprender e incorporar el componente ion-refresher en una aplicación
desarrollada con IONIC.
 Incluir los componentes ion-refresher en un ion-refresher-content.

 Comprender y aplicar un componente ion-reorder.

4
Tema 7. Ideas clave
7.2. ion-loading
Este componente nos ofrece una pantalla que se muestra mientras se cargan los
datos a mostrar en la página. Su funcionamiento es muy similar a los componentes
expuestos en los anteriores temas y los atributos, eventos y funciones prácticamente
los mismos. La diferencia es que, esta vez, no tenemos que crear un componente que
vayamos a mostrar, ya que el propio LoadingController sabe qué tiene que pintar, y
lo pasaremos por parámetro las personalizaciones pertinentes. Para crear el
componente seguiremos el modelo de la siguiente captura.
Figura 1. Ejemplo de LoadingController.


5
Tema 7. Ideas clave
Figura 2. Visualización de LoadingController.
Como siempre, os animamos a que probéis y modifiquéis el loading para profundizar

un poco más.
7.3. ion-progress-bar
Este componente es una barra de progresión horizontal. Se utiliza para mostrar el

progreso de una tarea. Hay de dos tipos: determinados e indeterminados. La
diferencia entre uno y otro es que el indeterminado no muestra el progreso que lleva
mientras que el determinado sí.
Propiedades:
 buffer: un indicador de buffer. El valor debe ser entre 0 y 1 [0, 1].

 color: ["primary", "secondary", "tertiary", "success"...] .
 reversed: cambia la dirección de la barra de progresión.

 type: tipo de la barra de progreso. [determinate|indeterminate]

6
Tema 7. Ideas clave
 value: cuánto se ha completado de la barra de progresión. El valor debe ser entre
0 y 1 [0, 1].
Ejemplo:
Figura 3. Código de ion-progress-bar.
La figura 3 sería una barra de progreso por defecto y sin atributos, visualmente
quedaría así:
Figura 4. Visualización de ion-progress-bar.
Si le añadimos value:
Figura 5. Visualización del ion-progress-bar con la propiedad value.
También a las barras de progreso se les puede cambiar el color.


7
Tema 7. Ideas clave
Figura 6. Código de ion-progress-bar con la propiedad color.
Figura 7. Visualización de ion-progress-bar con la propiedad color.
Si utilizamos el tipo indeterminado y el atributo reversed, en código se vería así:

Figura 8. Ejemplo de ion-progress-bar indeterminado y con reversed.

8
Tema 7. Ideas clave
Figura 9. Visualización de ion-progress-bar indeterminado y con reversed.
Para terminar mostramos el uso del buffer y su visualización:
Figura 10. Ejemplo de ion-progress-bar con buffer.


9
Tema 7. Ideas clave
7.4. ion-spinner
Para usarlo debes añadir el nombre de spinner que quieres utilizar. En el ejemplo los
listamos:
Figura 11. Listado de spinners.

10
Tema 7. Ideas clave
Figura 12. Código de ion-spinner.
Figura 13. Visualización de ion-spinner.

11
Tema 7. Ideas clave
Como puede observarse, esta parte es muy simple de usar. Todos los ejemplos
utilizamos puedes encontrarlos en la rama: examples/EXA21-progress-indicators.
Vídeo. Ion-loading, ion-progress-bar e ion-spinner.
Accede al vídeo a través del aula virtual
7.5. ion-range
Este componente permite seleccionar un valor o rango. Puedes añadir labels a los
lados del componente seleccionando el slot start o end con el mismo funcionamiento
que ya hemos visto en otros componentes:
Propiedades:
 color: Color que se le puede añadir al componente.

 debounce: El tiempo en milisegundos que tarda en activar el ionChange.
 disabled: Boolean con el que, si está activado, no se puede interactuar con el
componente.
 dualKnobs: Permite añadir otro marcador para poder seleccionar uno.
 max y min: Cada uno es una propiedad y sirve para setear el valor mínimo y máximo
del rango.

12
Tema 7. Ideas clave
 name: Nombre del formControl del formulario.
 pin: Boolean con el que, si es true, aparece un número entero cuando se presiona
el marcador.
 snap: Boolean que divide el rango en partes.
 step: Especifica el valor del granulado del snap.
 ticks: Boolean que solo aplica si snap es true y muestra el valor de cada punto.
 value: Valor del componente.
Eventos:
 ionBlur: Se emite cuando se pierde el foco.

 ionChange: Se emite cuando el valor cambia.
 ionFocus: Se emite cuando se pone el foco en el componente.
Para este componente traemos dos tipos de ejemplos:
Por un lado, combinamos el <ion-progress-bar> con este componente para que se

vea el dinamismo de ambos componentes.
Hemos creado una página radio-range-example donde, aparte de los ejemplos de los
rangos, vamos a mostrar también los de otro componente. Pero ahora centrémonos
en los rangos:
Figura 14. Rangos en un componente <ion-progress-bar>.

13
Tema 7. Ideas clave
Como hemos mencionado, por un lado, tenemos un componente progress-bar cuyo
valor va a ser progress, una variable definida en el ts. Por otro lado, tenemos el
componente range con un mínimo y un máximo de 100 pin. Recordamos que es para
mostrar el valor y el color del rango.
En el evento ionChange llamamos a changeProgress y lo pasamos en valor del rango.

Observemos el archivo .ts:
Figura 15. Llamada changeProgress.
Hemos inicializado progress a 0.0. Acordémonos que progess-bar debe tener un

valor entre 0 y 1. Si nos damos cuenta, hemos definido el valor del ion-range entre 1
y 100. Para que el progress-bar pueda obtener un valor acorde a sus especificaciones
lo dividimos entre 100:
Figura 16. Visualización de changeProgress (1/2).
Como veis, donde está situado el marcador, está situada la barra de progreso.

14
Tema 7. Ideas clave
Figura 17. Visualización de changeProgress (2/2).
Con esto, lo que queremos mostrar es que la barra de progreso es dinámica y

podemos hacer que crezca y decrezca según nuestras necesidades y requisitos en
nuestra aplicación.
A continuación, vamos a mostrar distintas configuraciones para el componente:
Figura 18. Uso de <ion-icon>.
Podemos hacer uso de los <ion-icon> y sus atributos slot para colocarlo en ambos
lados, simulando un “menor”/“mayor” con su tamaño.
Figura 19. Visualización de <ion-icon>.

15
Tema 7. Ideas clave
Figura 20. Propiedad dual-knobs.
Como vemos, en este ejemplo se hace el uso de la propiedad dual-knobs para tener
dos marcadores y poder elegir un rango.
Figura 21. Visualización de dual-knobs.
En el siguiente ejemplo usamos la propiedad snaps para fraccionar el ion range:
Figura 22. Propiedad snaps.
Hemos simulado un termómetro que va a tener un valor entre -10 y 50 grados. Para
ello, utilizamos snap y step para remarcar cuando tiene cada rango.
Figura 23. Visualización de snaps y steps.
El ejemplo se encuentra en el repo en la rama: examples/EXA22-ion-radio-range.

16
Tema 7. Ideas clave
7.6. ion-radio
Los componentes ion-radio suelen ir dentro de su componente padre <ion-radio-

group>. Este conjunto de componentes sirve para elegir un valor entre n valores.
Propiedades:
 color: Color que se le puede añadir al componente.

 disabled: Boolean que, si es true, nos deshabilita el componente.
 value: Valor del radio.
Eventos:
 ionBlur: Se emite cuando se pierde el foco.

 ionFocus: Se emite cuando se pone el foco en el componente.
El componente padre, el <ion-radio-group>, también tiene una serie de propiedades

y eventos.
Propiedades:
 allowEmptySelection: Permite no seleccionar ningún radio.

 value: Valor del radio.
Eventos:
 ionChange: Se emite cuando el valor cambia.

17
Tema 7. Ideas clave
A continuación, vamos a ver un par de ejemplos:
Figura 24. Ejemplo de <ion-radio-group>.
En este primer ejemplo, vemos que el valor por defecto es goodfather. Además,
hemos hecho que aparezcan todos los radios al principio de la vista:
Figura 25. Visualización de <ion-radio-group>.

En el siguiente ejemplo, hacemos uso de la propiedad allow-empty-selection para

permitir el no tener la necesidad de elegir un radio. Esto podría ser necesario en
formularios donde algún campo es opcional.

18
Tema 7. Ideas clave
Por otro lado, esta vez hemos puesto los radios al final (en sentido horizontal) y usado
colores. Debemos recordar que este componente, igual que muchos otros de los que
hemos hablado, se podrían usar en un formulario (recordamos Angular y otros
ejemplos vistos en temas anteriores).
Figura 26. Ejemplo de allow-empty-selection.
Figura 27. Visualización de allow-empty-selection.

El ejemplo mostrado y el anterior están en el repo en la rama: examples/EXA22-ion-

radio-range.

19
Tema 7. Ideas clave
Vídeo. ion-range e ion-radio.
7.7. ion-refresher
El componente ion-refresher proporciona la funcionalidad de cargar más contenido

pulsando hacia abajo en la pantalla. Es similar al infinte-scroll, sin embargo,
mientras que para este había que hacer scroll hacia abajo y, llegado a cierto punto, el
componente se encargaba de cargar más contenido, en ion-refresher lo que se hace
es desplazar la pantalla ligeramente hacia abajo para ir cargando.
Propiedades:
 animated: Boolean, por defecto habilitado, hace una animación que hace aparecer
el modal.
 closeDuration: Tiempo que tarda en cerrarse el refresher. No se aplica cuando
se usa un spinner. String por defecto: ‘280ms’

 disabled: Boolean con el que, si está establecido a true, el componente estará
oculto.

20
Tema 7. Ideas clave
 pullFactor: El valor por defecto es 1. Si queremos hacer la animación más lenta,
debemos bajar el número, por ejemplo, a 0.5. Si queremos que la animación sea
más rápida, debemos poner un valor mayor de 1. No aplica cuando se usa un
spinner.
 pullMax: Máxima distancia en la que el componente entra en estado de carga de
contenido. Si se usa un spinner no aplica.
 pullMin: Mínima distancia en la que se activa la carga de contenido.
 snapbackDuration: Tiempo que tarda en volver al estado de refresco. No aplica
cuando se usa un spinner.
Eventos:
 ionPull: Se emite cuando el usuario pulsa hacia abajo y se va a activar el

refresher.
 ionRefresh: Se emite cuando el usuario ha pulsado hacia abajo y suelta el dedo

para entrar en el estado refreshing. Se debe llamar al método complete cuando
termine la operación asíncrona.
 ionStart: Se emite cuando el usuario empieza a pulsar hacia abajo, antes del
ionPull.
Funciones:
 cancel(): Cancela el refresco. Cambia el estado de refreshing a canceling.

 complete(): Se llama cuando la operación asíncrona de carga ha completado, es
decir, una vez hayas recibido el contenido de tu petición debe llamarse a este
método.
 getProgress(): Devuelve un número que representa cómo de lejos ha pulsado el
usuario para que se active el refresco. Si es menor que 0, quiere decir que el
refresco de contenido no se va a activar. Si es 1 o mayor, significa que va a entrar
en el estado refreshing.

21
Tema 7. Ideas clave
El <ion-refresher> tiene un componente hijo que es el que contiene el spinner, el
texto y, en definitiva, el que va a hacer la «magia visual».
7.8. ion-refresher-content
Propiedades:
 pullingIcon: Spinner o icono que va a aparecer cuando empieces a pulsar hacia

abajo.
 pullingText: Texto que va a aparecer cuando empiezas a pulsar hacia abajo.
 refreshingSpinner: Spinner animado que empieza cuando entra en el estado
refreshing. Valores disponibles:
["bubbles"|"circles"|"circular"|"crescent"|"dots"|"lines"|"lines-
small"|null|undefined]
 refreshingText: Texto que aparece cuando está refrescando el contenido.
Vamos a poner un ejemplo de uso. Hemos adaptado lo que ya teníamos hecho con el
infiniteScroll para lo que nosotros queremos. Como siempre, hemos creado una
página ion-refresher y lo hemos añadido al menú para poder navegar hasta él. El
HTML:
Figura 28. HTML con ion-refresher.

22
Tema 7. Ideas clave
Dentro de ion-content hemos añadido nuestro componente <ion-refresher>,
utilizado el slot y el evento ionRefresh. Es importante el uso de este evento porque
en él cargaremos el contenido mediante nuestra función loadData. Dentro, añadimos
su componente hijo, <ion-refresher-content>, en el que hemos seteado el tipo de
spinner que queremos.
Para mostrar el contenido, hemos hecho un ion-list. Cada uno de los elementos
que va a cargar va a ir en un <ion-item> usando la directiva *ngFor. Dentro ponemos
el nombre y el contenido que, en este caso, es un texto aleatorio. Veamos la
implementación en el TS.
Figura 29. Definición del array.
Primero definimos un array llamado Xmen, donde vamos a cargar todos los
elementos con posibles nombres y un texto genérico.
Figura 30. Variable character.

23
Tema 7. Ideas clave
Character es una variable que hemos declarado para que vaya variando el nombre
que cogemos de la lista de nombres.
Figura 31. Constructor.
En el constructor llamamos a pushHeroes, esta es la función que se va a encargar de

rellenar el array de xmen.
Figura 32. PushHeroes.
PushHeroes nos va a rellenar el array con 5 nuevos elementos. Además, en vez de

hacer push, esta vez hacemos unshift que sirve para, en vez de añadir los elementos
al final, hacerlo al principio del array. El método que dispara el evento es el siguiente:
Figura 33. Simulación del delay.

24
Tema 7. Ideas clave
La función loadData se encargar de simular el delay que produce el hacer una petición
(un delay largo) y llama a la función pushHeroes para cargar 5 héroes más. Finalmente,
para que desaparezca el spinner, se llama a event.target.complete().
La función wait solo lleva un timeOut de los milisegundos que se lo pasen por
parámetro.
Visualmente sin cargar:
Figura 34. Visualización del ion-refresher sin cargar.
Visualmente cargando:
Figura 35. Visualización del ion-refresher cargándose.

25
Tema 7. Ideas clave
Después de la carga:
Figura 36. Visualización del ion-refresher después de la carga.
Los ejemplos pueden verse en el repo en la rama: examples/EXA23-refresher.
7.9. ion-reorder
Este componente permite reordenar los elementos dados en un grupo. Basta con
pinchar y arrastrar por el grupo. El componente padre y donde debe estar cada
elemento es <ion-reorder-group>. Veamos los atributos de este componente padre:
Propiedades:
 disabled: Boolean que deshabilita o no el componente.

26
Tema 7. Ideas clave
Eventos:
 ionItemReorder: Evento que debe ser escuchado una vez ha terminado la
reordenación para llamar a la función complete
Métodos:
 complete: Completa la reordenación. Debemos llamarlo desde el evento
ionItemReorder.
Para verlo en la práctica, creamos una nueva página para poner nuestro nuevo
ejemplo, reorder-group, y lo agregamos al menú de ejemplos. Añadimos el
componente <ion-reorder-group> y, cuando se dispara el evento ionItemReorder,
llamamos a una función doReorder. Por defecto, va a estar desactivado la opción de
ordenar.
Tras esto, dentro tenemos n ion-items y dentro de cada uno se añade un <ion-
reorder>. En nuestro caso, hemos seleccionado el icono al final de la fila mediante el
slot=“end”.
Figura 37. Ion-reorder.

27
Tema 7. Ideas clave
Al final de nuestro fichero HTML, añadimos un botón para activar y desactivar la
reordenación:
Figura 38. Botón para activar o desactivar la reordenación.
En el TS de la página:
Figura 39. ViewChild.
Hacemos uso del decorador ViewChild (recordemos de Angular) que sirve para poder
modificar/consultar un elemento del HTML. En este caso, lo hacemos con el elemento
que se encarga de reordenar.
La función doReorder se encarga de llamar a complete() para permitir que se ejecute

la reordenación y activateReorder() se encarga de activar y desactivar.

28
Tema 7. Ideas clave
Visualmente sin activar:
Figura 40. Visualización de ion-reorder sin activar.
Ahora activamos el botón de reordenar y movemos los elementos 1 y 6:

Figura 41. Visualización con ion-reorder activado.

29
Tema 7. Ideas clave
Como vemos, al estar activados, a la derecha de cada fila está el icono de dos líneas
que indica que pueden ser movidos, podemos ver los logs:
Figura 42. Logs del ion-reorder activado.
Una vez desactivado, pulsando el botón que se encarga de ello, vuelve a estar
desactivada la edición y el nuevo orden establecido se mantiene.
El contenido del ejemplo puede verse en el repo en la rama: examples/EXA24-

reorder.
Vídeo. ion-refresher, ion-refresher-content e ion-reorder.


30
Tema 7. Ideas clave
A fondo
Componente ion-loading
Ionic Framework. (S. f.). ion-loading. https://ionicframework.com/docs/api/loading
Este enlace nos lleva directamente a la documentación oficial del componente ion-
loading. En ella podemos encontrar todas las opciones que nos ofrece el
componente. Esta documentación es vital para adaptar el componente a los
requisitos de nuestra aplicación, ya que nos ofrecen muchas combinaciones para ello.
Componente ion-progress-bar
Ionic Framework. (S. f.). ion-progress-bar.

https://ionicframework.com/docs/api/progress-bar
Este enlace nos lleva directamente a la documentación oficial del componente ion-
progress-bar.

31
Tema 7. A fondo
Componente ion-spinner
Ionic Framework. (S. f.). ion-spinner. https://ionicframework.com/docs/api/spinner
Este enlace nos permite navegar por la documentación oficial del componente ion-
spinner. En ella podemos encontrar todos los atributos, funciones y eventos de los
que disponga este componente y cómo adaptar el componente a los requisitos de
nuestra aplicación.
Componente ion-radio
Ionic Framework. (S. f.). ion-radio. https://ionicframework.com/docs/api/radio
radio. Como en los recursos anteriores, podemos encontrar todos los atributos,
funciones, eventos y posibles combinaciones para nuestra aplicación.

32
Tema 7. A fondo
Componente ion-refresher
Ionic Framework. (S. f.). ion-refresher. https://ionicframework.com/docs/api/refresher
refresher.
Componente ion-refresher-content
Ionic Framework. (S. f.). ion-refresher-content.

https://ionicframework.com/docs/api/refresher-content
refresher-content.

33
Tema 7. A fondo
Componente ion-reorder
Ionic Framework. (S. f.). ion-reorder. https://ionicframework.com/docs/api/reorder
reorder.

34
Tema 7. A fondo
Test
1. ¿Qué funcionalidad nos ofrece el componente ion-loading?
A. Un spinner.
B. Un mensaje de alerta.
C. Una ventana emergente mientras cargas datos.
D. Ninguna de las anteriores.
2. ¿Qué componente nos ofrece una barra de progresión horizontal?

A. ion-spinner.
B. ion-bar.
C. ion-progress.
D. ion-progress-bar.
3. ¿Con qué propiedad podemos indicar en que punto de progresión se encuentra la

barra de un ion-progress-bar?
A. value.
B. buffer.
C. color.
D. reversed.
4. ¿Con qué atributo indicas el spinner que quieres mostrar dentro del componente
ion-spinner?
A. type.
B. name.
C. value.
D. color.

35
Tema 7. Test
5. ¿Para qué sirve el componente ion-range?
A. Este componente nos sirve para mostrar tablas de datos gráficamente.
B. Este componente nos permite visualizar números en un rango.
C. Este componente nos da un rango de valores aleatorios.
D. Este componente permite seleccionar un valor o rango.
6. ¿Qué propiedad tenemos que situar a true de un ion-range para que aparezca el
número entero en el que situamos el punto?
A. value.
B. min.
C. max.
D. pin.
7. ¿Qué evento se emite en un ion-range cuando el valor cambia?

A. ionChange.
B. ionFocus.
C. ionBlur.
D. ionchangevalue.
8. ¿Qué componente nos permite elegir un valor entre n valores?

A. ion-radio.
B. ion-button.
C. ion-list.
D. ion-spinner.
9. ¿Qué componente nos ofrece cargar más contenido pulsando ligeramente hacia
abajo en la pantalla?
A. ion-scroll.
B. ion-infinte-scroll.
C. ion-refresher.
D. ion-tab.

36
Tema 7. Test
10. ¿Qué componente nos permite reordenar los elementos dados en un grupo?
A. ion-list.
B. ion-reorder.
C. ion-order.
D. ion-menu.

37
Tema 7. Test

Tema 7

Cargado por

Copyright:

Formatos disponibles

Tema 7

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 7

Cargado por

Copyright:

Formatos disponibles

Tema 7

Diseño y Desarrollo de Aplicaciones para Móviles

Diseño y Desarrollo de Aplicaciones para Móviles

7.1. Introducción y objetivos

En este tema de la asignatura de Diseño y Desarrollo de Aplicaciones para Móviles,

Todo lo que aquí se explica está desarrollado y publicado en un repositorio público,

En este tema vamos a tener unos objetivos más específicos:

 Comprender y aplicar el componente ion-loading.

 Incluir los componentes ion-refresher en un ion-refresher-content.

Diseño y Desarrollo de Aplicaciones para Móviles

Figura 1. Ejemplo de LoadingController.

Diseño y Desarrollo de Aplicaciones para Móviles

Como siempre, os animamos a que probéis y modifiquéis el loading para profundizar

Este componente es una barra de progresión horizontal. Se utiliza para mostrar el

 buffer: un indicador de buffer. El valor debe ser entre 0 y 1 [0, 1].

 reversed: cambia la dirección de la barra de progresión.

Diseño y Desarrollo de Aplicaciones para Móviles

Figura 3. Código de ion-progress-bar.

Figura 4. Visualización de ion-progress-bar.

Figura 5. Visualización del ion-progress-bar con la propiedad value.

También a las barras de progreso se les puede cambiar el color.

Diseño y Desarrollo de Aplicaciones para Móviles

Figura 7. Visualización de ion-progress-bar con la propiedad color.

Si utilizamos el tipo indeterminado y el atributo reversed, en código se vería así:

Figura 8. Ejemplo de ion-progress-bar indeterminado y con reversed.

Diseño y Desarrollo de Aplicaciones para Móviles

Para terminar mostramos el uso del buffer y su visualización:

Figura 10. Ejemplo de ion-progress-bar con buffer.

Diseño y Desarrollo de Aplicaciones para Móviles

Figura 11. Listado de spinners.

Diseño y Desarrollo de Aplicaciones para Móviles

Figura 13. Visualización de ion-spinner.

Diseño y Desarrollo de Aplicaciones para Móviles

Vídeo. Ion-loading, ion-progress-bar e ion-spinner.

Accede al vídeo a través del aula virtual

 color: Color que se le puede añadir al componente.

Diseño y Desarrollo de Aplicaciones para Móviles

 ionBlur: Se emite cuando se pierde el foco.

Para este componente traemos dos tipos de ejemplos:

Por un lado, combinamos el <ion-progress-bar> con este componente para que se

Figura 14. Rangos en un componente <ion-progress-bar>.

Diseño y Desarrollo de Aplicaciones para Móviles

En el evento ionChange llamamos a changeProgress y lo pasamos en valor del rango.

Figura 15. Llamada changeProgress.

Hemos inicializado progress a 0.0. Acordémonos que progess-bar debe tener un

Figura 16. Visualización de changeProgress (1/2).

Diseño y Desarrollo de Aplicaciones para Móviles

Con esto, lo que queremos mostrar es que la barra de progreso es dinámica y

A continuación, vamos a mostrar distintas configuraciones para el componente:

Figura 18. Uso de <ion-icon>.

Figura 19. Visualización de <ion-icon>.

Diseño y Desarrollo de Aplicaciones para Móviles

Figura 21. Visualización de dual-knobs.

En el siguiente ejemplo usamos la propiedad snaps para fraccionar el ion range:

Figura 22. Propiedad snaps.

Figura 23. Visualización de snaps y steps.

El ejemplo se encuentra en el repo en la rama: examples/EXA22-ion-radio-range.

Diseño y Desarrollo de Aplicaciones para Móviles

Los componentes ion-radio suelen ir dentro de su componente padre <ion-radio-