Presentamos el marco de componentes Ionic 6

Ionic, un marco de interfaz de usuario para el desarrollo de aplicaciones multiplataforma, está disponible en su sexta iteración y ofrece un conjunto de nuevos componentes y una mejor integración de interfaz de usuario para Android, iOS y aplicaciones de escritorio.

El marco Ionic utiliza tecnologías web modernas para permitir a los desarrolladores crear aplicaciones multiplataforma que pueden publicarse en la web, en el escritorio (usando Electron) o como aplicaciones móviles nativas (usando Capacitor ).

Dado que cada plataforma tiene su propio lenguaje de diseño, los componentes de Ionic ajustan su visualización según la plataforma del usuario.

Para garantizar que el diseño del componente coincida estrechamente con el lenguaje de diseño de las plataformas de destino, a partir de esta versión, Ionic pasará a un ciclo de lanzamiento anual que se adaptará mejor a las versiones de iOS y Android.

Ionic introdujo tres nuevos componentes en esta versión:

El componente Accordion ayuda a los desarrolladores a organizar grandes cantidades de contenido en categorías que el usuario puede mostrar/ocultar.

El componente Breadcrumbs está diseñado para aplicaciones grandes que contienen navegación jerárquica profunda y ayudan a los usuarios a orientarse en la aplicación.

Finalmente, Ionic introdujo un nuevo componente Modal llamado Bottom Sheet, que permite a los desarrolladores crear superposiciones dinámicas que se ajustan a las posiciones definidas por el usuario.

Ionic 6 también incluye varias mejoras a los componentes existentes.

El componente Ionic Datetime recibió una revisión muy necesaria para alinearlo con los estilos actuales de iOS y Android, además de mejorar su funcionalidad en el escritorio con soporte para lectores de pantalla. Finalmente, el componente de fecha y hora elegirá automáticamente el formato de fecha/hora en función del idioma del usuario y la configuración de la región.

Los componentes Modal y Popover ahora se pueden usar de forma declarativa dentro de las plantillas de la aplicación. Esto significa que los usuarios pueden usar ion-modal o ion-popover y pasar un valor booleano a la nueva propiedad is-open o un evento a la propiedad trigger, es decir:


<ion-button id="modal-button">Open Modal</ion-modal>
<ion-modal trigger="modal-button">
  modal content
</ion-modal>

o


<ion-popover is-open="true">
  pop-over content
</ion-popover>

Tenga en cuenta que los desarrolladores deben proporcionar una identificación de elemento para usar la propiedad de activación y, por lo general, está destinada a casos de uso simples. La propiedad is-open proporciona una mayor flexibilidad, pero los desarrolladores deberán establecer manualmente el valor booleano en función de las interacciones del usuario.

Esta versión también renovó los estilos de Android de muchos componentes para que coincidan con los estilos de Material Design, incluida la compatibilidad con las variantes rellenas y de contorno .

Los desarrolladores pueden encontrar más detalles sobre esta versión en el blog de Ionic y en el registro de cambios .

Se puede encontrar una lista completa de cambios importantes en Ionic 6 en el repositorio de Ionic Github

Ionic es un software de código abierto disponible bajo la licencia MIT .

EXTRAIDO