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 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.
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". )
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.RefresherThe 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 HeaderListHeader 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.Ioniconstheme/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--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-selectedAnchorThe ion-anchor component has been renamed to ion-router-linkBack ButtonConverted ion-back-button to use shadow DOM.CardConverted ion-card to use shadow DOM.Header / FooterThe no-border attribute has been renamed to ion-no-borderMenuRemoved the main attribute, use content-id (for vanilla JS / Vue) and contentId (for Angular / React) instead.Use swipeGesture() instead of swipeEnable() function
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.