Announcing Ionic v6.1
source link: https://ionicframework.com/blog/announcing-ionic-v6-1/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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!
Recommend
-
54
Today, I’m thrilled to announce the beta release of the best version of Ionic Framework yet: Ionic 4.0.0-beta.0! ? Representing over a year’s worth of work, Ionic 4 brings significant performance and build time improvements, powerful theming cap...
-
39
Today we're thrilled to announce the general availability of Ionic React, a native React version of Ionic Framework that makes it easy to build apps for iOS, Android, Desktop, and the web as a Progressive Web App. All with one code base, standar...
-
6
Announcing Ionic VueToday I am thrilled to announce the release of Ionic Vue, a native Vue version of Ionic Framework that makes it easy to build apps for iOS, Android, and the web as a Progressive Web App. Ionic Vue has been written to take...
-
5
Announcing 1-Click Publish to App Stores from Ionic Appflow Update: The publish to app stores feature is now available on all paid Appflow plans! Upgra...
-
8
Announcing Ionic Secure Storage: Secure, reliable high-performance data accessI’m excited to announce the first rele...
-
4
Announcing Ionic Storage v3Photo by
-
10
Announcing Capacitor 3.0Today I’m thrilled to announce the 3.0 release of
-
8
Earlier this week I had the privilege of giving the Ionic Framework Update at Ioniconf 2021 where we annou...
-
5
Announcing Stencil v2.9Stencil v2.9 is here, jam packed with new features to improve the Stencil develop...
-
7
Hey folks! We’re excited to announce the release of Capacitor 3.3.0! This release includes a bunch o...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK