What’s up Ionic 5!

Ionic 5 launched and lets see whats new with it
Launch Date : February 11, 2020

Ionic Framework 5 (Magnesium) is launched.

This new version contains new

API for custom animation
Ionicons
Updated colors
Starter designs
Components Improvements
and many more

All above changes applies to Angular, React, and Vue integrations.

iOS Design

The largest change in this release is a massive design upgrade across our UI components.Apple recently released iOS 13, which updated the design of many components.

Some of them we are discussing here.

Segment

The iOS Segment design changed drastically from the previous iOS version. Prior to iOS 13, borders and a filled background were used to differentiate between checked and unchecked buttons. With the latest design update, a single indicator is now used to slide between the buttons, checking the one it ends on. This update includes a gesture that can be used to drag the indicator. Below is a comparison between Ionic 4 and Ionic 5.

See the Segment documentation for usage information.

Header

New properties have been introduced to the header & title components to get shrinking large titles, small titles, and collapsible buttons.

Large Title

The large title in iOS collapses into a standard-sized title when the content scrolls beyond a certain point. It can also be used without any collapsing if desired.

Small Title

The small title, also known as a header note, is generally used inside of a toolbar above another toolbar that contains a standard-sized title.

Swipe to Close Modal

The Swipe to Close Modal is something often seen in iOS now. Instead of displaying a modal that covers the entire screen and requires the user to tap a button to close it, it will display a modal that is inset with the page behind it pushed back. This update also includes a gesture to drag the modal down to close it.

Menu Overlay Type

In prior versions of iOS, the side menu used a "reveal" type menu which pushed the main content over to reveal the menu. The new iOS design features a menu that will overlay the content with an updated animation.

Refresher

The Refresher pulling icon in iOS has been updated in native applications to be above a header with a large title. In addition to that, as you pull down on the content the spinner tick marks will gradually be displayed until the content is pulled down enough to where all ticks are seen and then it will begin to rotate.

List Header

The lists in iOS have had many design changes. Most notably the List Header now takes on a more large and bold design. In previous versions, the List Header was uppercase and small and didn’t have the option for a bottom border. With the addition of the lines property on a List Header, it is now possible to add a border while matching the latest design.

Ionic Animations 🕺

Ionic 5 introduces our brand new open source animations utility, Ionic Animations, that provides the tools developers need to build highly performant animations regardless of the framework they are using.

Ionicons ❤️

Ionic 5 ships with the latest version of our free and open source icon library, Ionicons 5, which includes an all-new icon set!

Ionic Colors 🌈

Ionic has been updated with all new colors by default! If your app was not created using one of our starters and you don’t override these colors, you’ll automatically get the new colors in your app. If your app was created using an Angular or React starter, the colors are defined in the theme/variables.scss file and will need to be updated manually.

Redesigned Starters 🖌

With all of the changes to the design of our components, we felt it was time to update the design of our existing starters and add a new one! Take a look at the new designs and the new list starter below.