After more than a year of work, the Ionic Framework team has released version 5.0.0( Magnesium ) on 11th Feb 2020. This new version focused significantly on material design guidelines which improved the UI includes iOS 13 & Android design, compatibility with multiple frameworks (not only with Angular but now it supports react framework), ionic 5 features include revamped Ionicons, updated Ionic colors, new API for creating your own custom animations, new starter designs, improvements to component customization, updated documentation and other improvements that we will analyze in this article.
The major change in ionic version 5 release is a massive design upgrade across our UI components they have focused more on following the material design guidelines. Apple recently released its iOS 13 update, where they updated the design of many components and thus included some updates to our own, these include headers, segments, large and small titles, and the menu overlay type. Let’s check out the changes the ionic team has made to match native iOS!
The ionic team has completely revamped the iOS Segment design drastically from its previous iOS version. With the ionic 5 design update, a single indicator is now used to slide between the buttons, checking the one it ends on. Now it uses a gesture that can be used to drag the indicator that applies for both Material Design and iOS and some changes were introduced to support the new design.
(image- 2nd)
ion-segment no longer triggers an ionSelect event. Developers should use ionChange event to trigger an ion-segment. --indicator-color now applies to the checked segment button (for both ios and md & --indicator-color-checked has been removed ) --background variable has been added to style the ion-segment component. The header is a root component of the page that holds the toolbar component. In ionic v4 iOS introduced the idea of a collapsible header and different sized titles. In Ionic version 5, some properties are added to the header & title components to get shrinking large titles, small titles, and collapsible buttons.
Ionic v 4 provides a way to create the collapsible titles that exist on stock iOS apps. The large title in iOS collapses into a default sized title when the content scrolls exceeding a certain point & this setup requires configuring your IonTitle, IonHeader, and IonButtons elements.
The small title refers as a header note often used in combination with Swipe to Close Modals. It generally used inside of a toolbar above another toolbar that contains a standard-sized title (Additionally, to get the small title styling, ion-title must have size="Small". )
<ion-toolbar>
<ion-title size="small">Small Title</ion-title></ion-toolbar>
The Swipe to Close Modals in iOS mode has the ability to be presented in a card-style and swiped to close mode instead of displaying a modal that covers the entire screen. The card-style presentation and swipe to close gesture need to enable I,e swipeToClose and presenting element need to be passed upon modal creation. Ionic 5 has includes a gesture to drag the modal down to close it.
The ion-refresher produces pull-to-refresh functionality on a content component & it's pulling icon in iOS has been updated above a header with a large title. The pull-to-refresh pattern lets a user pull down on a list of data using touch to retrieve more data & as you pull down on the content the spinner rotates until the content is pulled down enough to where all ticks are seen and then it will begin to rotate. iOS refresher in ionic v5 has completely redesigned to Material Design refresher.
ListHeader a header component for a list and the lists in iOS now become more large and bold design. Comparing ionic v4, the List Header was uppercase and small and didn’t have the option for a bottom border. The new lines property on a List Header enables you to add a border while matching the latest design.
Ionic Animations is an open-source animations utility that provides developers the tools to build highly performant animations regardless of the framework they are using. Ionic Animations is now officially part of the ionic 5.0 release which uses the Web Animations API to build and run all of your animations. Web browser schedule to run all your animations which offloads major tasks and prioritize optimizations to your animations allowing your animation to run smoothly as possible which helps you achieve high FPS which maintaining low CPU uses.
Ionic 5 ships with the latest version open-source icon library Ionicons 5, which includes all-new icons for use in web, iOS, Android, and desktop apps.
The below are some differences noticed with this upgrade:
Ionic has nine default colors that can be used to change the color of many components & in order to change the default colors we have to change the color attribute. Ionic 5 updated with all new colors by default also to change the colors of your Angular or React app developers need to update the theme/variables.scss manually. Now ionic 5 supports the dark mode & with the growing popularity for the dark color scheme, developers are now looking to include it to their apps to support user preferences.
Default Primary Secondary Light Medium Dark
This starter enables you to fully focus on the development of the features that set your product apart from the competitors instead of building your app from scratch and with all of the changes to the design ionic team updated it's starter design to a new one.
We all know that the components are not very easy to customize due to following reasons
To make it easier for developers, ionic team added support for more CSS variables, converted some scoped components to Shadow DOM, and began adding support for Shadow Parts.
The following components were converted to Shadow DOM:
What is Shadow DOM?
An important aspect of web components is encapsulation and shadow DOM serves for encapsulation. It allows a component to have its very own “shadow” DOM tree, that it's markup structure, style, and behavior hidden and separate from other code on the page that can’t be accidentally accessed from the main document and the code can be kept nice and clean.
In addition to that, Shadow DOM allows the use of custom CSS variables within the component for easier theming. In previous versions, Sass variables were used to customize and theme an app but that caused longer build times but to have multiple themes within the same app it required creating multiple CSS files with different Sass variables.
With the growing support for Shadow Parts in browsers, users will be able to target particular elements inside of our components to override their styles directly.
One of the biggest improvements to the latest Angular v9.0 is that Ivy is enabled by default & for Ionic Angular developers, Ivy support is now fully enabled in Ionic 5. Ivy allows apps to only keep pieces of the renderer that they require, instead of the whole thing. This means that our final output will be noticeably smaller, which is better for load performance.
Check our detail blog on Angular Ivy
This is a comprehensive list of the new features introduced in the Ionic 5 Framework.
CSS
--CSS Utilities
<ion-content padding></ion-content>The way the CSS variables are used for targeting the activated, focused and hover backgrounds have been updated on the following components:
<ion-label text-wrap></ion-label>
<ion-item wrap></ion-item>
Components
--Action Sheet
The following CSS variables have been modified or added:
| Old | New |
|---|---|
--button-background | |
--background-activated | --button-background-activated |
--button-background-activated-opacity | |
--background-selected | --button-background-selected |
--button-background-focused | |
--button-background-focused-opacity | |
--button-background-hover | |
--button-background-hover-opacity | |
--button-background-selected | |
--button-background-selected-opacity | |
--button-color | |
--button-color-activated | |
--button-color-focused | |
--button-color-hover | |
--button-color-selected |
The ion-anchor component has been renamed to ion-router-link
Converted ion-back-button to use shadow DOM.
Converted ion-card to use shadow DOM.
The no-border attribute has been renamed to ion-no-border
main attribute, use content-id (for vanilla JS / Vue) and contentId (for Angular / React) instead.swipeGesture() instead of swipeEnable() functionColors
The default Ionic colors have been updated to the following:
primary: #3880ff
secondary: #3dc2ff
tertiary: #5260ff
success: #2dd36f
warning: #ffc409
danger: #eb445a
light: #f4f5f8
medium: #92949c
dark: #222428
Mode
Mode is now cascaded from the parent to the child component.
<ion-segment mode="md">
<ion-segment-button mode="md">Button</ion-segment-button>
<ion-segment-button mode="md">Button</ion-segment-button>
</ion-segment>
Ionic team recommends updating your app to the Ionic 4 final release (v4.11.10) and check for any deprecation warnings specific to your app in the developer console. After fixing any warnings, get started by installing Ionic 5 CLI globally in the system.
#Install ionic 5 to project
npm i -g ionic
# for an angular app
npm i @ionic/angular@latest --save
# for a react app
npm i @ionic/react@latest --save
npm i @ionic/react-router@latest --save
npm i ionicons@latest --save
# for a stencil / vanilla JS app
npm i @ionic/core@latest --save
#Running the Upgraded Ionic 5 App
ionic serve
#Run in the Android or iOS device/simulator
ionic run android
ionic run ios
Ionic 5 features bring some solid changes such as iOS 13 design updates, a new API for creating custom animations, revamped Ionicons, updated Ionic colors, full support for Ivy, Angular’s new renderer, new starter designs, Ionic CLI 5 and the support for React frameworks along with the Angular.
Hopefully, Ionic v5 will take the Ionic app development to another level and will help to grow the cross-platform app that can run on the desktop, as PWAs, web, and mobile platforms.
Also Check out our Article : Comparison Between Ionic 4 Vs Ionic 3
This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.
