4.8
(1171)
Top-5-New-Features-Ionic5-1150x450

Top 5 New Features Introduced in Ionic 5

Ionic, the open-source UI framework that leverages core web technologies for building awesome cross-platform mobile apps, has recently (in Feb. 2020) released its latest version – Framework 5, also called Magnesium.

It focuses mainly on improving user engagement and refining native mobile experience. This blog post throws light into the top 5 features of Ionic v5.

  1. iOS Design Updates

A main highlight of Ionic 5 is the design updates that are in line with the design changes introduced in iOS 13. Ionic has implemented changes on major UI components. 

Some of these include:

  • Segment – A single indicator to differentiate between checked and unchecked buttons.
  • Header – Collapsible header along with specific components. 
  • Swipe to Close Modal – Gesture to pull down a modal to close it.

Upgrades have also been made for Titles, Overlay Menu and Refresher. 

  1. Ionic Animations

An interesting feature of Ionic 5 is Ionic Animations – a new open-source, framework-independent utility that helps in the creation of performance-oriented animations.

It uses Web Animations API for building and running animations, as opposed to the traditional JavaScript-driven approach. Hence, a high performance is assured; 60fps for both desktop and mobile animations, while maintaining a low CPU usage and lesser energy consumption.

  1. Ionicons

Ionic 5 contains the updated version of Ionicons, the open-source icon library that now has over 1200 redesigned icons! Three unique variants are available for each icon – outline, fill, and sharp.

Ionicons v5 is made compatible to seamlessly work for both iOS and Android, without having to switch icons (except for platform-specific icons like menu, nav back, etc.) in and out between the two platforms.

  1. Ionic Colors

A new set of default colors is now provided in Ionic 5. These colors will get automatically updated in those apps not created using Ionic starters and having previous colors not overridden. 

But, the colors have to be manually updated for apps built using Angular or React starter. The new version also recommends a set of colors for using in dark mode.

  1. Easier Component Customization

Ionic 5 enables developers to easily customize components. Earlier, this was a difficult task due to lack of proper CSS variables (Sass variables were mainly used) and scoped element styles taking precedence over custom styles.

Now, v5 has more CSS variables and also supports Shadow Parts. Scoped components like Back Button, Card, Segment and Split Pane are changed to Shadow DOM. All this ensures a smooth customization process in Ionic.

Conclusion

Ionic 5 also includes redesigned starters and it offers complete support for Ivy, the renderer of Angular v9. All these features, which when combined with the services of a reputed Ionic app development company, can help build aesthetically beautiful mobile apps for your business.

4.8
(1171)
Are you looking for help with your next project?

Over a decade, we’ve assisted 250+ companies in delivering more than 350+projects. Contact us today at the Scalans office number or you may use online contact form.

I worked with Scalans on two major web app rebranding projects, both were highly customized. Both sites turned out great, they kept up to date and stayed on deadlines. I would recommend Scalans for anyone doing upgrade that has a clear path of what they want and need.
★★★★★

Ben Holsen
Sr Program Director, Tech Mahindra, USA

Click on a star to rate this article...

Thanks for rating this article.

To stay updated, please follow us on LinkedIn!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Talk to our experts

Click on a star to rate this article...

Thanks for rating this article.

To stay updated, please follow us on LinkedIn!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?