Announcing Ionic v6.1

We added many new component features in v6.0, including the bottom sheet modal, revamped ion-datetime, and declarative overlays. In v6.1, we’re excited to add all sorts of enhancements to those components, making it easier than ever for developers to build and ship robust mobile apps.

Let’s dive into the new features we’re adding in Ionic 6.1.

Sheet Modal Breakpoint API

We’ve upgraded the new sheet modals to give developers more control over the user’s experience. The new setCurrentBreakpoint method can move the modal programmatically. Plus, the getCurrentBreakpoint method and ionBreakpointDidChange event let you respond to users’ actions in order to handle more complex interactions between UI elements.

<ion-button id="trigger-button">Open modal</ion-button>
<ion-modal trigger="trigger-button">
  <ion-content>
    Modal content
    <ion-button id="move-breakpoint">Move breakpoint</ion-button>
  </ion-content>
</ion-modal>

<script>
  const sheetModal = document.querySelector('ion-modal');

  sheetModal.breakpoints = [0, 0.25, 0.5, 1];
  sheetModal.initialBreakpoint = 0.5;

  sheetModal.addEventListener('ionBreakpointDidChange', ev => {
    console.log('breakpoint changed', ev.detail.breakpoint);
  });

  const moveBreakpointBtn = document.querySelector('#move-breakpoint');
  moveBreakpointBtn.addEventListener('click', () => {
    sheetModal.setCurrentBreakpoint(0.75);
  });
</script>

Control When Your Modals Dismiss

We’ve added a new property to ion-modal called canDismiss, which lets you control precisely when users can leave a modal. Set it to a boolean for direct control, or an asynchronous function for things like showing a confirmation dialog.

There’s even a spring effect in the animation, for a smooth look and feel. Fancy!

Disable Specific Dates

Another property we’re excited to add is isDateEnabled, for ion-datetime. This is a function that gives developers complete control over the logic behind disabling certain dates. Disable individual days, weekends, whole months, anything you like. Combine these with ion-datetime’s min and max properties for ultimate flexibility.

function isDateEnabled(dateIsoString: string) {
  const date = new Date(dateIsoString);
  const dayOfWeek = date.getDay();
  return dayOfWeek !== 5 && dayOfWeek !== 6;
}

Gesture Events for Range

ion-range is getting two new events: ionKnobMoveStart and ionKnobMoveEnd. These fire at the start and end of the user’s gesture, letting developers respond to interaction every step of the way. These events also play nice with ion-range’s keyboard support.

Custom Item Counters

Currently, when using an ion-item with an ion-input or ion-textarea, you can use the counter property to show how close the user is to hitting the max input length. With this new release, developers can now customize how the counter is formatted using the new counterFormatter property. You can show not just character counts, but whatever text you’d like.

function counterFormatter(length: number, maxlength: number) {
  return `${maxlength - length} characters remaining`;
}

Virtual Scrolling Compatibility

Finally, we’ve made it easier to use Ionic with your favorite third party virtual scrolling library, by adding the ion-content-scroll-host class to your custom scroll container. Any components that used to depend on ion-content for their scroll-based behavior will now use your new element instead. They’ll keep all their functionality with no extra effort on your end.

React (react-virtuoso)

const Footer = () => {
  return (
    <IonInfiniteScroll threshold="100px">
      <IonInfiniteScrollContent></IonInfiniteScrollContent>
    </IonInfiniteScroll>
  )
}

const Example = () => (
  <IonPage>
    <IonContent fullscreen scrollY={false}>
      <Virtuoso 
        className="ion-content-scroll-host"
        data={items}
        style={{ height: "100%" }}
        itemContent={(item) => <IonItem>{item}</IonItem>}
        components={{ Footer }} />
    </IonContent>
  </IonPage>
);

Vue (vue-virtual-scroller)

<template>
  <ion-page>
    <ion-content :fullscreen="true" :scroll-y="false">
      <RecycleScroller 
        class="ion-content-scroll-host scroller"
        :items="items"
        :item-size="50"
      >
      <template v-slot="{ item }">
        <ion-item>{{ item }}</ion-item>
      </template>
      <template #after>
        <ion-infinite-scroll threshold="100px">
          <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </template>
      </RecycleScroller>
    <ion-content>
  </ion-page>
</template>

<style scoped>
  .scroller {
    height: 100%;
  }
</style>

Angular (@angular/cdk/scrolling)

<ion-content [fullscreen]="true" [scrollY]="false">
  <cdk-virtual-scroll-viewport itemSize="50" class="ion-content-scroll-host">
    <ion-item *cdkVirtualFor="let item of items">
      {{ item }}
    </ion-item>
    <ion-infinite-scroll threshold="100px">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </cdk-virtual-scroll-viewport>
</ion-content>

What’s Next?

With Ionic 6.1 out in the wild, we’re going full steam ahead on the next version, bringing even more developer experience enhancements to your doorstep. We’re especially excited about the upcoming component playground for our documentation. This will make it a breeze to see how Ionic components behave in real time without having to spin up your own application.

While you’re getting your hands dirty with the new improvements, if you have ideas for making them even better, let us know on our Github repo. The 6.1 release would not have been possible without massive community contributions, and we look forward to keeping the relationship strong as we move into future releases. Thank you!