Ionic, a UI framework for cross-platform application development, is out in its 6th iteration, offering a set of new components and better UI integration for Android, iOS, and Desktop applications.
The Ionic framework utilizes modern web technologies to enable developers to build cross-platform applications that can either be published to the web, to the desktop (using Electron) or as native mobile applications (using Capacitor).
Since each platform has its own design language, Ionic components adjust their display according to the user's platform.
To ensure the component design closely matches the design language of the target platforms, starting with this release Ionic will move to a yearly release cycle that will better match the iOS and Android releases.
Ionic introduced three new components in this release:
The Accordion component helps developers organize large amounts of content into categories that the user can show/hide.
The Breadcrumbs component is intended for large applications that contain deep hierarchical navigation and help users orient themselves in the application.
Finally, Ionic introduced a new Modal component called Bottom Sheet, enabling developers to create dynamic overlays that snap to user-defined positions.
Ionic 6 also includes several improvements to existing components.
The Ionic Datetime component received a much-needed overhaul aligning it to the current iOS and Android styles as well as improving its functionality on the desktop with screen reader support. Finally, the Datetime component will automatically choose the date/time format based on the user language and region settings.
Both the Modal and Popover components can now be used declaratively within the application templates. This means users can use the ion-modal or ion-popover and either pass a boolean into the new is-open property or an event to the trigger property, i.e:
<ion-button id="modal-button">Open Modal</ion-modal>
<ion-modal trigger="modal-button">
modal content
</ion-modal>
or
<ion-popover is-open="true">
pop-over content
</ion-popover>
Notice that developers must provide an element id to use the trigger property and it is generally intended for simple use cases. The is-open property provides better flexibility, but developers will need to set the boolean value based on user interactions manually.
This release also revamped the Android styles of many components to match the Material Design styles, including support for the filled and outline variants.
Developers can find further details about this release on the Ionic blog and the changelog.
A full list of breaking changes in Ionic 6 can be found on the Ionic Github repository
Ionic is open-source software available under the MIT license.