Announcing Ionic 6

Today I am excited to announce the release of Ionic 6! This release adds improved desktop support, overhauled components, iOS and Android design changes, and so much more!

Let’s take a look at what you can expect with Ionic 6.

Easy Upgrade ⛵️

While this release of Ionic does bring breaking changes, we strived to keep these changes to a minimum. Ionic 6 has fewer breaking changes than both the previous Ionic 4 and Ionic 5 releases!

Developers can visit the Ionic 6 Migration Guide to get step-by-step upgrade instructions.

Faster, More Reliable Release Cadence 🚄

With the release of Ionic 6, we are adjusting our release schedule to better coincide with iOS and Android software releases. Developers can expect to see yearly major releases of Ionic moving forward.

Design Changes 🎨

iOS

Some of the notable design changes to the iOS mode include a new refresher style and updated toolbar and modal styles for dark mode. We have also added a new collapse option to both ion-header and ion-footer. This allows developers to hide the header and footer backgrounds until users begin to scroll:

<ion-header translucent="true" collapse="fade">
  <ion-toolbar>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  ...
</ion-content>

<ion-footer translucent="true" collapse="fade">
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

Android

We have revamped the input styles in Material Design mode to support new filled and outline variants. We have also added error and helper text slots in addition to a character counter.

Additionally, ion-select has been updated to use the latest Material Design styles with the popover interface.

The Ionic team is keeping an eye on Material You and waiting for more guidance to be released by Google.

Components ⚙️

Bottom Sheet

We are very excited to ship the new bottom sheet feature in Ionic 6. As part of ion-modal, developers can create dynamic sheets that snap to breakpoints and overlay interactive content.

Datetime

One of the most significant component changes in Ionic 6 is with the ion-datetime component. We have revamped datetime to use the latest calendar picker styles on iOS and Android. Datetime also has improved functionality on desktop devices with full keyboard and screen reader integration for selecting dates. ion-datetime now looks at the language and region settings on a device so that it is presented in a format that each user is familiar with.

Select

In addition to the new Material Design styles added to ion-select, we have also improved our desktop support by adding keyboard interactions for selecting options. By using the popover interface with ion-select, developers can create rich desktop select experiences with ease.

Modal

ion-modal has been revamped and can now be used declaratively inside application templates. This means developers can write <ion-modal> in their template and pass in a component to show. We have also added new isOpen and trigger properties. These properties allow developers to present and dismiss modals with less code.

For React and Vue developers, this change means that getting a reference to ion-modal will return the actual modal component rather than a placeholder element.

<ion-button id="modal-button">Open Modal</ion-modal>
<ion-modal trigger="modal-button">
  <my-custom-component></my-custom-component>
</ion-modal>

...

<ion-modal is-open="true">
  <my-custom-component></my-custom-component>
</ion-modal>

Popover

ion-popover can also be used declaratively inside application templates, and it receives the same isOpen and trigger properties that ion-modal receives.

We have also improved the sizing and positioning options for the popover through the side, alignment, and size properties. These new features give developers control over how popovers are presented in their apps.

But wait, there’s more! Nested popover functionality has been added to Ionic. This is a powerful feature for building multi-layer dropdown menus in desktop applications. Nested popovers work with the new declarative syntax and integrate seamlessly with the trigger property.

Item

As part of the Material Design updates, we have added new styles on ion-item to better match the specification. Additionally, we have added new helper and error slots for better form validation.

<ion-item>
  <ion-label>Email</ion-label>
  <ion-input type="email"></ion-input>
  <ion-note slot="helper">Please enter your email.</ion-note>
  <ion-note slot="error">You must enter a valid email.</ion-note>
</ion-item>

Accordion

The first new component coming in Ionic 6 is ion-accordion. Accordions make it possible to organize large amounts of content in an easy-to-understand way. This component comes packed with functionality such as smooth animations, keyboard support, and reduced motion accessibility.

<ion-accordion-group>
  <ion-accordion value="colors">
    <ion-item slot="header">
      <ion-label>Colors</ion-label>
    </ion-item>

    <ion-list slot="content">
      <ion-item>
        <ion-label>Red</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Green</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Blue</ion-label>
      </ion-item>
    </ion-list>
  </ion-accordion>
  <ion-accordion value="shapes">
    <ion-item slot="header">
      <ion-label>Shapes</ion-label>
    </ion-item>

    <ion-list slot="content">
      <ion-item>
        <ion-label>Circle</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Triangle</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Square</ion-label>
      </ion-item>
    </ion-list>
  </ion-accordion>
  <ion-accordion value="numbers">
    <ion-item slot="header">
      <ion-label>Numbers</ion-label>
    </ion-item>

    <ion-list slot="content">
      <ion-item>
        <ion-label>1</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>2</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>3</ion-label>
      </ion-item>
    </ion-list>
  </ion-accordion>
</ion-accordion-group>

Breadcrumbs

The second new component is ion-breadcrumbs. Breadcrumbs provide context to users regarding where they are in your application and how they got there. This component can be themed and collapsed too!

<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Performance and Tooling 🛠

Ionic is built as a set of lightning-fast components that use modern Web APIs. This means your apps can be just as fast as native applications. We use the best parts of Stencil to bring performance and bundling improvements to your Ionic apps.

Custom Elements

In Ionic 6 we are shipping a new build of Ionic that we call the Custom Elements build. This build does not rely on Stencil‘s lazy loading and helps bundlers include only the components used in your application. This can reduce the overall size of your application. While the exact savings will vary from app to app, we are confident that most apps will see bundle size reductions with this change.

The Custom Elements build is available in Ionic React and Ionic Vue and will be rolled out in Ionic Angular in a future release.

Vite, Rollup, and ESBuild — oh my!

As an added bonus, Ionic 6 is usable with tooling such as Vite, Rollup, and ESBuild, giving developers even more options for building apps.

Vue Routing 🗺

Vue developers have a new way of navigating in Ionic Vue using the useIonRouter injectable. This new feature lets developers use the Vue Router while retaining control over the page transitions.

import { useIonRouter } from '@ionic/vue';

...

const router = useIonRouter();
router.navigate(
  `/page`,
  'forward',
  'replace',
  customAnimation
);

See the Ionic Vue Router Documentation for more information.

Platform Detection Customization 🧶

We have added new platform detection customization options in Ionic 6. These options help developers account for devices that do not always neatly fall into the platform buckets that Ionic has pre-configured. Using this feature, developers can customize how platforms in Ionic are set to account for other devices.

import { IonicConfig } from '@ionic/core';

const config: IonicConfig = {
  platform: {
    /** The default `desktop` function returns false for devices with a touchscreen.
     * This is not always wanted, so this function tests the User Agent instead.
     **/
    'desktop': (win) => {
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent);
      return !isMobile;
    }
  }
}

Angular users can access documentation here for more information.
React users can access documentation here for more information.
Vue users can access documentation here for more information.

TypeScript Improvements 💬

In Ionic 5, calling methods on the target of a CustomEvent would yield TypeScript errors unless developers typecast the target. This was common when calling event.target.complete() on an IonInfiniteScroll component. In Ionic 6, we are introducing TypeScript interfaces that have this target correctly typed out of the box:

Before

const onInfinite = (ev: CustomEvent) => {
  ...
  ev.target.complete(); // TypeScript error
}

After

const onInfinite = (ev: InfiniteScrollCustomEvent) => {
  ...
  ev.target.complete();
}

These custom event interfaces can be found in the documentation for each Ionic component that emits an event. For example, the interface for IonInfiniteScroll can be found on the Infinite Scroll Documentation.

Getting Started 🤠

Developers with existing Ionic 5 apps looking to get started with Ionic 6 should check the Ionic 6 Migration Guide.

Looking to start with a brand new Ionic 6 app? Try our app creation wizard!

While Ionic 6 is ready for everyone to start using, you may encounter some speed bumps along the way. We would greatly appreciate it if you would report them on our GitHub repo.

What’s Next? 👀

2022 is going to be an incredible year for Ionic. Our focus moving forward is on modernizing Ionic and ensuring that it is easy to use. One big feature we are working on is a component playground for the Ionic documentation website. This playground will let developers see examples of what components look like right on the page. They will also be able to interact with components and change their properties without having to start up an Ionic application on their own.

Beyond that, we are looking to enhance the features we shipped in Ionic 6 to make them even better! If you have ideas for ways we can improve our revamped components, let us know on our GitHub repo.

Stay tuned!

Thank You 💙

We want to extend a sincere thank you to the entire Ionic community. Ionic 6 would not have been possible without the great community feedback, testing, and code contributions. We look forward to continuing to engage with the community to identify ways we can make Ionic even better.