Ionic Framework 6.1 introduces the ability to dynamically change the current breakpoint of a sheet modal. This features enables developers to animate sheet modals to predefined breakpoints based on your application needs.
To get started with this feature, you will need to use a sheet modal in Ionic. The below example is of Angular, but this feature applies to the vanilla web component implementation and all supported frameworks.
<ion-button id="sheet-modal">Click to open modal</ion-button>
<ion-modal #modal
trigger="sheet-modal"
[initialBreakpoint]="0.25"
[breakpoints]="[0.25, 0.5, 1]">
<ng-template>
<ion-content>
<ion-list>
<ion-item button (click)="moveTo(0.25)">
<ion-label>Move to 0.25</ion-label>
</ion-item>
<ion-item button (click)="moveTo(0.5)">
<ion-label>Move to 0.5</ion-label>
</ion-item>
<ion-item button (click)="moveTo(1)">
<ion-label>Move to 1</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ng-template>
</ion-modal>
The above sheet modal will initially display when the button is clicked, to the 0.25 breakpoint. It has available breakpoints for 0.25, 0.5, and 1 (fully expanded).
To change the breakpoint dynamically, we need to query the ion-modal element to access the public API function: setCurrentBreakpoint.
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-sheet-modal-example',
templateUrl: 'sheet-modal-example.component.html'
})
export class SheetModalExample {
@ViewChild('#modal') modal: ElementRef;
moveTo(breakpoint: number) {
const { nativeElement } = this.modal;
if (!nativeElement) {
return;
}
nativeElement.setCurrentBreakpoint(breakpoint);
}
}
That is it, your sheet modal should now dynamically change the breakpoint value after interacting with the individual items to move to a specific breakpoint.
You can use this concept to make features such as an iOS maps clone:
Source code: https://github.com/sean-perkins/ionic-6.1.0-maps-example
We hope that you find value in this feature and others in the 6.1.0 release.
Top comments (0)