Ionic 5.

February 22, 2020

Hace un par de semanas salio la versión 5 de Ionic, la cual nos trae nuevas cosas interesantes para nuestras Apps como son actualizaciones de diseño para IOS 13, nueva API para crear tus animaciones personalizadas, Ionicons renovados, Ionic Colors actualizados, Nuevos diseños de Starters, mejoras a personalización de componentes, entre otros.

Facil upgrade.

Uno de los grandes temores de todos los desarrolladores es que cuando sale una nueva versión sea bastante dificil aplicar esta versión en sus Apps por los breaking changes, según el equipo de Ionic esta modernización no sera traumatica porque al usar un acercamiento de Web Components los cambios de los APIs son manejados separadamente de los componentes UI haciendo que sea sencillo aplicar estas mejoras.

Diseño en IOS

Apple recientemente libero IOS 13, el cual actualiza el diseño de muchos componentes y esta actualización garantiza el diseño de los mismos. Veremos a continuación estos cambios.

Segment

El IOS Segment cambio drasticamente para diferenciar entre un botón chequeado de un no chequeado.

Encabezados

En IOS se introdujo el concepto de encabezados que se colapsán y de diferentes tamaños. Para soportar esto se han agregado algunas propiedades que pueden ser facilmente agregado al header y los titles.

Encabezado Grande.

El encabezado colapsa despues de hacer scroll en cierto punto hacia un encabezado de tamaño estandar.

Encabezado pequeño

Los encabezados pequeños son usados frecuentemente en toolbars sobre un toolbar que contiene un titulo de tamaño estandar, pero en Apps nativas es mayormente encontrado en combinación con un Modal. Ahora podras realizar este efecto.

Swipe al cerrar modal

El Swipe al cerrar el modal es algo frecuentemente visto en iOS ahora. En lugar de mostrar un modal que cubre toda la pantalla y requiere que el usuario haga tap para cerrar el modal, el modal deja un pequeño espacio que se puede presionar para cerrar el modal, adicionalmente, a poder jalar el modal hacia abajo para cerrar.

Tipos de menu de superposición

Ahora el menu de superposición sobrepone el contenido del menu con una nueva animación.

Refresher

El refresher tambien ha sufrido una mejora al usar una animación que se posiciona sobre el encabezado desapareciendo cuando el contenido nuevo aparece.

Encabezado de listas

Los encabezados de listas han cambiado para tener un diseño mas grande y más oscuro.

Ionic animations

Con Ionic 5 se introduce una nueva utilidad de animaciones, que proveen a los desarrolladores las herramientas necesarias para animaciones con alto rendimiento independiente del framework que esten usando.

Ionicons

Los iconos de software libre conocidos como ionicos han agregado un nuevo conjunto de elementos graficos.

Ionic colors

Se han agregado un nuevo conjunto de colores por defecto ademas que agregan un nuevo conjunto de colores recomendaros para el modo oscuro.

Angular Ivy

Para los desarrolladores de ionic Angular ahora se tiene soporte completo para Ivy el nuevo sistema de renderizado.

Breaking changes

Puedes ver una lista de los breaking changes que trae la actualización acá.

Esto seria a grandes rasgos los cambios que trae esta actualización mayor del framework puedes ver el post original acá

Si este contenido te parece útil y me quieres ayudar a hacer mas considera apoyarme en Patreon.

Bueno eso es todo por ahora. Espero sea de utilidad :)