Originally published at: https://ionicframework.com/blog/5-examples-of-the-new-ionic-6-bottom-sheet-modal/
This is a guest post from Simon Grimm, Ionic Insider and educator at the Ionic Academy. Simon just released a brand new eBook called Built with Ionic where he breaks down popular apps like Netflix and rebuilds them completely with Ionic styling and interactions! The Ionic 6 modal comes with a brand new presentation mode…
5 Likes
i absolutly love this new moda style 
sadly this issue is kinda blocking us from using: bug: sheet modal gesture breaks when interacting with inputs/keyboard on ios · Issue #23878 · ionic-team/ionic-framework · GitHub
Exelent… 
I tried but i got error in breakpoint
Object literal may only specify known properties, and 'breakpoints' does not exist in type 'ModalOptions<ComponentRef>'.```Hi - are you sure you are using Ionic 6?
i use ionic -v, show result 6.18.1
Thats the cli version. Maybe better to show package.json
this my package.json
{
"name": "test-apps",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~12.1.1",
"@angular/core": "~12.1.1",
"@angular/forms": "~12.1.1",
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
"@capacitor/app": "1.0.6",
"@capacitor/core": "3.3.2",
"@capacitor/haptics": "1.1.3",
"@capacitor/keyboard": "1.1.3",
"@capacitor/status-bar": "1.0.6",
"@ionic/angular": "^6.0.1",
"@types/hammerjs": "^2.0.40",
"chart.js": "^3.6.1",
"hammerjs": "^2.0.8",
"ion-bottom-sheet": "^2.0.6",
"ng2-charts": "^2.4.3",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.1",
"@angular-eslint/builder": "~12.0.0",
"@angular-eslint/eslint-plugin": "~12.0.0",
"@angular-eslint/eslint-plugin-template": "~12.0.0",
"@angular-eslint/template-parser": "~12.0.0",
"@angular/cli": "~12.1.1",
"@angular/compiler": "~12.1.1",
"@angular/compiler-cli": "~12.1.1",
"@angular/language-service": "~12.0.1",
"@capacitor/cli": "3.3.2",
"@ionic/angular-toolkit": "^4.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ng2-charts-schematics": "^0.1.7",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.2.4"
},
"description": "An Ionic project"
}
And My Ionic info
Ionic:
Ionic CLI : 6.18.1 (C:\Users\R
cordova-res : not installed globally
native-run : 1.5.0
System:
NodeJS : v14.17.3 (C:\Program Files\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10
Any code you can share on what you have done? Difficult to guess out of the error only. Share a minimum reproduction?
I just tried
import { ModalController } from '@ionic/angular';
constructor(
public modalController: ModalController
) { }
async detail() {
const modal = await this.modalController.create({
component: PartnerDetailModalPage,
breakpoints: [0, 0.3, 0.5, 0.8],
initialBreakpoint: 0.5
});
return await modal.present();
}
and i got error
Object literal may only specify known properties, and 'breakpoints' does not exist in type 'ModalOptions<ComponentRef>'.
I just put this code in a simple starter app and works flawlessly. (using ionic start and then add the code)
And by looking at your package.json, you have not started from clean ionic app, because you are using angular 12 and Ionic6 comes with A13 out of the box - not sure if it requires it (?).
So potentially your problem is cause by the way you added Ionic 6 to your app, with potentially not fully upgrading according to the guide.
{
"name": "ionic6test",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~13.0.0",
"@angular/core": "~13.0.0",
"@angular/forms": "~13.0.0",
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "~13.0.0",
"@ionic/angular": "^6.0.0",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.1",
"@angular/cli": "~13.0.1",
"@angular-eslint/builder": "~13.0.1",
"@angular-eslint/eslint-plugin": "~13.0.1",
"@angular-eslint/eslint-plugin-template": "~13.0.1",
"@angular-eslint/template-parser": "~13.0.1",
"@angular/compiler": "~13.0.0",
"@angular/compiler-cli": "~13.0.0",
"@angular/language-service": "~13.0.0",
"@ionic/angular-toolkit": "^5.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.4.4"
},
"description": "An Ionic project"
}
How can I programmatically “navigate” to a specific breakpoint?
Is there any method or does present() supports a { breakpoint: number } param?
Not yet, i created a PR for this: feat(modal): programmatically move to a breakpoint by EinfachHans · Pull Request #24648 · ionic-team/ionic-framework · GitHub
1 Like
I have failed to find this component in the docs. But is there a way to make it stop at a certain breakpoint without ever exceeding that point upwards, like preventing it from moving above 0.5. As it looks, even when I set the maximum value to 0.5, I can still drag it to 1, much as it pulls back to 0.5.
Is it possible, to make the background clickable?
I want that the modal is always visiable at the bottom. This works but the main page is not clickable when the modal is shown.
Use the backdropBreakpoint property 