Share this article Return

Facebook Twitter Linkedin Pinterest



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.

Top features introduced in Ionic 5

iOS Design

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!

Segment



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 .

no longer triggers an event. Developers should use event to trigger an . --indicator-color now applies to the checked segment button (for both ios and md & --indicator-color-checked has been removed )

now applies to the checked segment button (for both and & has been removed ) --background variable has been added to style the ion-segment component.

variable has been added to style the component. The checked property has been removed in ionic 5 & now developers have to set the value property on the ion-segment to match the value of the desired checked segment button.

Header

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.

Large Title

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.

Small Title

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>



Swipe to Close Modal

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.

Refresher

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.

List Header

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

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.

Ionicons



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:

One set of icons for both modes (iOS & Android)

Icons released with three new variants: fill (default), outline and sharp

Ionic icons will no longer able to switch between two different icons based on the mode

Icon for each needs to be set using the ios and md properties to set them per mode

There are few icons that will automatically switch, such as the icon used in the menu button, back button and the detail icon on items

Ionic Colors

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

Redesigned Starters



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.

Easier Customization

We all know that the components are not very easy to customize due to following reasons



Lack of available CSS Variables or way to style inner elements.

Components are being scoped and their Ionic styles taking priority over custom styles.

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:

Back Button

Card

Segment

Split Pane

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.



Angular Ivy

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

Breaking Changes

This is a comprehensive list of the new features introduced in the Ionic 5 Framework.



CSS

--CSS Utilities



<ion-content padding></ion-content>

<ion-label text-wrap></ion-label>

<ion-item wrap></ion-item>

The way the CSS variables are used for targeting the activated, focused and hover backgrounds have been updated on the following components:

Action Sheet



Back Button

Button

FAB Button

Item

Menu Button

Segment Button

Tab Button

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

Anchor

The ion-anchor component has been renamed to ion-router-link

Back Button

Converted ion-back-button to use shadow DOM.

Card

Converted ion-card to use shadow DOM.

Header / Footer

The no-border attribute has been renamed to ion-no-border

Menu

Removed the main attribute, use content-id (for vanilla JS / Vue) and contentId (for Angular / React) instead.

attribute, use (for vanilla JS / Vue) and (for Angular / React) instead. Use swipeGesture() instead of swipeEnable() function





Colors



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>

Updating to Ionic 5 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 Conclusion 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

About The Author Amit Khirale My passion lies in empowering other businesses on how to take their complex processes, business & operations online, using modern technologies for web & mobile application development which are custom, scalable and reliable.

Share this article

Facebook Twitter Linkedin Pinterest