The recent Ionic 5 release adds support for iOS 13 styles, a new custom animation API, and an improved Ionicon icon set.
The release of iOS 13 adds many changes to designs, and Ionic now provides support for these design refinements, including the Segment, collapsible Header, collapsing large Title, small Title, closing Modal, Menu Overlay, Refresher, and List Header components. Some of these changes are cosmetic, while others lead to a behavioral change which introduces a breaking change from Ionic 4.
While there are breaking changes in Ionic 5, the upgrade path is straightforward.
The Ionic 5 release makes many improvements to the design experience of applications created with the framework, from a refined default color palette to new starter components to make it easier to get started with Ionic. Improvements are also available in Ionic 5 to make it easier to customize styles through CSS variables, the Shadow DOM, and initial support for Shadow Parts. As explained in the W3C Shadow Parts Working Draft Recommendation:
Shadow DOM allows authors to separate their page into "components", subtrees of markup whose details are only relevant to the component itself, not the outside page. This reduces the chance of a style meant for one part of the page accidentally over-applying and making a different part of the page look wrong. However, this styling barrier also makes it harder for a page to interact with its components when it actually wants to do so.
This specification defines the ::part() pseudo-element, which allows an author to style specific, purposely exposed elements in a shadow tree from the outside page’s context. In combination with custom properties, which let the outside page pass particular values (such as theme colors) into the component for it to do with as it will, these pseudo-elements allow components and the outside page to interact in safe, powerful ways, maintaining encapsulation without surrendering all control.
Beyond converting several Ionic components to leverage Shadow DOM and Shadow Parts, Ionic 5 also refines the approach for customizing Ionic themes, enabling dark mode support, and CSS variables.
For Ionic users leveraging Angular, Ionic 5 adds full support for Angular Ivy, the long-awaited new Angular component rendering approach released as part of Angular 9.
Ionic 5 adds support for a new version of Ionicon, a rich collection of open-source icons for use in web, iOS, Android, and desktop apps in SVG and web font formats. Developers may use Ionicon independent of the Ionic framework.
For a complete list of updates, Ionic developers should review the Ionic 5 release notes, migration guide, and full list of breaking changes.
While originally created as a framework for Angular, Ionic now supports developers leveraging React, and Ionic's Vue.js integration is currently in beta.
The Ionic Framework is open-source software available under the MIT license. Contributions and feedback are encouraged via the Ionic GitHub project and should follow the Ionic contribution guidelines and code of conduct.
