Introducing the Ionic 6 . Component Framework

Introducing the Ionic 6 . Component Framework

Ionic, a user interface framework for cross-platform application development, has been released in its sixth edition, introducing a host of new components and better UI integration for Android, iOS, and desktop applications.

The Ionic framework uses modern web technologies to enable developers to create cross-platform applications that can be deployed either on the web, on the desktop (using Electron), or as native mobile applications (using Capacitor).

Since each platform has its own design language, the ionic components adjust their width according to the user platform.

To ensure that component design closely matches the design language of the target platforms, starting with this release, Ionic will transition to an annual release cycle that better aligns with iOS and Android versions.

Ionic introduced three new components in this version:

The accordion component helps developers organize large amounts of content into user-show/hide categories.

The Breadcrumbs component is designed for large applications that have deep hierarchical navigation and help users orient themselves in the application.

Finally, Ionic has introduced a new configurable component called Bottom Sheet, which allows developers to create dynamic overlays that snap to user-specified positions.

Ionic 6 also includes several improvements to existing components.

The Ionic Datetime component has received a much-needed overhaul to align it with existing iOS and Android styles as well as improve its functionality on the desktop with screen reader support. Finally, the Datetime component will automatically choose the date/time format based on the user’s language and region settings.

Both Modal and Popover components can now be used declaratively within application templates. This means that users can use an ion-modal or an ion-popover and either pass a boolean to the new is-open property or an event to the trigger property, for example:

Open Modal

  modal content


  pop-over content

Note that developers must provide an item ID to use Effects The property is generally intended for simple use cases. the Open The property provides better flexibility, but developers will need to manually set the Boolean value based on user interactions.

This version also revamped Android styles for many components to match Material Design styles, including support for full And Outline variables.

Developers can find more details about this release on the Ionic blog and changelog.

A full list of intermittent changes to Ionic 6 can be found at the Ionic Github Repository

Ionic is open source software available under the MIT license.


Leave a Comment

Your email address will not be published. Required fields are marked *