{"id":3081,"date":"2020-02-11T18:37:58","date_gmt":"2020-02-11T18:37:58","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3081"},"modified":"2020-10-15T22:14:28","modified_gmt":"2020-10-15T22:14:28","slug":"announcing-ionic-5","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-5","title":{"rendered":"Announcing Ionic 5!"},"content":{"rendered":"

Today, I’m thrilled to announce Ionic Framework 5 (Magnesium)! \ud83c\udf89<\/p>\n

This release includes iOS 13 design updates, a brand new API for creating your own custom animations<\/a>, revamped Ionicons<\/a>, updated Ionic colors, new starter designs, improvements to component customization, and more!<\/p>\n

All of these changes are made in the core of Ionic Framework, which also applies to our Angular, React, and Vue (beta) integrations. Yes, if you haven\u2019t heard yet, we launched our official React<\/a> support this past October!<\/p>\n

Attend our upcoming live walkthrough of Ionic 5, hosted by the Ionic team. Register here<\/a><\/strong> <\/em><\/p>\n

Easy Upgrade \u26f5\ufe0f<\/h2>\n

You may be concerned about the upgrade process due to the fact that this is a major version release, but fret not!<\/em> When we migrated to follow the semantic versioning<\/a> convention, we committed ourselves to publish a major release when any known incompatible API changes were introduced. So in this case, the major version just indicates that our public API has been updated. And because we now use Web Components<\/a>, API changes are handled separately between our UI components and the JavaScript framework.<\/p>\n

Long story short: for those on v4, this upgrade should be easy.<\/strong> Now, let\u2019s dive in and see what\u2019s new!<\/p>\n

<\/p>\n

iOS Design \ud83c\udf4e<\/h2>\n

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 and thus warranted some updates to our own. Let’s check out some of the changes we made to match native iOS!<\/p>\n

Segment<\/h3>\n

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.<\/p>\n

\n
Segment in Ionic 4: Dark Mode<\/figcaption>
Segment in Ionic 5: Dark Mode<\/figcaption>

Due to the nature of this update, there were some breaking changes<\/a> introduced. Other than any updates related to the breaking changes, no changes need to be made to use the new Segment design. See the Segment documentation<\/a> for usage information.<\/p>\n

Header<\/h3>\n

iOS introduced the idea of a collapsible header and different sized titles in previous versions. In order to support this, we\u2019ve introduced some properties that can easily be added to the header & title components to get shrinking large titles, small titles, and collapsible buttons.<\/p>\n

Large Title<\/h3>\n

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.<\/p>\n

\n
Large Title: Light Mode<\/figcaption>
Large Title: Dark Mode<\/figcaption>

In order to achieve this, the header needs to be added twice: a header with a standard title above the content, and a collapsible header with a large title inside of the content. In addition to being able to collapse the header, Buttons and a Searchbar inside of the collapsible header can also collapse. See the documentation on Collapsible Large Titles<\/a> for usage information.<\/p>\n

Small Title<\/h3>\n

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. In native apps, it is most often used in combination with Swipe to Close Modals<\/a>. See the videos in the section below for a visual representation of the small title.<\/p>\n

See the Title documentation<\/a> for usage information.<\/p>\n

Swipe to Close Modal<\/h3>\n

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.<\/p>\n

\n
Swipeable Modal: Light Mode<\/figcaption>
Swipeable Modal: Dark Mode<\/figcaption>

In order to enable a swipe to close modal, swipeToClose<\/code> and presentingElement<\/code> need to be passed upon modal creation. See the documentation on Swipeable Modals<\/a> for more information.<\/p>\n

Menu Overlay Type<\/h3>\n

In prior versions of iOS, the side menu used a "reveal"<\/code> 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.<\/p>\n

\n
Overlay Menu: Light Mode<\/figcaption>
Overlay Menu: Dark Mode<\/figcaption>

Refresher<\/h3>\n

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. While updating the iOS refresher, we were able to use the same logic to completely redesign the Material Design refresher as well.<\/p>\n

\n
Refresher: Light Mode<\/figcaption>