5 Examples of the new Ionic 6 Bottom Sheet Modal

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…

4 Likes

i absolutly love this new moda style :smiley: 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… :relaxed:

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"
}