# 5 Examples of the new Ionic 6 Bottom Sheet Modal

**URL:** <https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393>\
**Category:** Ionic Framework\
**Created:** [December 14, 2021, 4:58pm UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393 "2021-12-14T16:58:07Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [December 14, 2021, 4:58pm UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/1 "2021-12-14T16:58:07Z")

</div>

Originally published at: [https://ionicframework.com/blog/5-examples-of-the-new-ionic-6-bottom-sheet-modal/](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…

---

<div class="post-metadata">

**Author:** ![EinfachHans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/einfachhans/32/130917_2.png) [@EinfachHans](https://forum.ionicframework.com/u/EinfachHans)\
**Post date:** [December 14, 2021, 5:28pm UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/2 "2021-12-14T17:28:51Z")

</div>

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](https://github.com/ionic-team/ionic-framework/issues/23878)

---

<div class="post-metadata">

**Author:** ![ryandan29](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@ryandan29](https://forum.ionicframework.com/u/ryandan29)\
**Post date:** [December 16, 2021, 7:53am UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/3 "2021-12-16T07:53:26Z")

</div>

Exelent… 😌

I tried but i got error in breakpoint

````auto
  Object literal may only specify known properties, and 'breakpoints' does not exist in type 'ModalOptions<ComponentRef>'.```
````

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [December 16, 2021, 8:17am UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/4 "2021-12-16T08:17:35Z")

</div>

Hi - are you sure you are using Ionic 6?

---

<div class="post-metadata">

**Author:** ![ryandan29](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@ryandan29](https://forum.ionicframework.com/u/ryandan29)\
**Post date:** [December 16, 2021, 8:57am UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/5 "2021-12-16T08:57:11Z")

</div>

i use ionic -v, show result 6.18.1

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [December 16, 2021, 9:12am UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/6 "2021-12-16T09:12:40Z")

</div>

Thats the cli version. Maybe better to show package.json

---

<div class="post-metadata">

**Author:** ![ryandan29](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@ryandan29](https://forum.ionicframework.com/u/ryandan29)\
**Post date:** [December 16, 2021, 9:13am UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/7 "2021-12-16T09:13:59Z")

</div>

this my package.json

```auto
{
  "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

```auto
   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

```

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [December 16, 2021, 10:07am UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/8 "2021-12-16T10:07:43Z")

</div>

Any code you can share on what you have done? Difficult to guess out of the error only. Share a minimum reproduction?

---

<div class="post-metadata">

**Author:** ![ryandan29](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@ryandan29](https://forum.ionicframework.com/u/ryandan29)\
**Post date:** [December 16, 2021, 10:13am UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/9 "2021-12-16T10:13:34Z")

</div>

I just tried

```auto
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

```auto
Object literal may only specify known properties, and 'breakpoints' does not exist in type 'ModalOptions<ComponentRef>'.

```

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [December 16, 2021, 5:37pm UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/10 "2021-12-16T17:37:30Z")

</div>

> [@ryandan29](#):
>
> ```auto
> 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();
> }
> 
> ```

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.

```auto
{
  "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"
}

```

---

<div class="post-metadata">

**Author:** ![hats](https://avatars.discourse-cdn.com/v4/letter/h/eada6e/32.png) [@hats](https://forum.ionicframework.com/u/hats)\
**Post date:** [February 18, 2022, 10:30am UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/11 "2022-02-18T10:30:46Z")

</div>

How can I programmatically “navigate” to a specific breakpoint?

Is there any method or does present() supports a { breakpoint: number } param?

---

<div class="post-metadata">

**Author:** ![EinfachHans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/einfachhans/32/130917_2.png) [@EinfachHans](https://forum.ionicframework.com/u/EinfachHans)\
**Post date:** [February 18, 2022, 11:23am UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/12 "2022-02-18T11:23:06Z")

</div>

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](https://github.com/ionic-team/ionic-framework/pull/24648)

---

<div class="post-metadata">

**Author:** ![Evanzsnr](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Evanzsnr](https://forum.ionicframework.com/u/Evanzsnr)\
**Post date:** [March 12, 2022, 3:46pm UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/13 "2022-03-12T15:46:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tovo1811](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tovo1811](https://forum.ionicframework.com/u/tovo1811)\
**Post date:** [March 13, 2022, 10:11am UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/14 "2022-03-13T10:11:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![EinfachHans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/einfachhans/32/130917_2.png) [@EinfachHans](https://forum.ionicframework.com/u/EinfachHans)\
**Post date:** [March 13, 2022, 2:41pm UTC](https://forum.ionicframework.com/t/5-examples-of-the-new-ionic-6-bottom-sheet-modal/218393/15 "2022-03-13T14:41:39Z")

</div>

Use the `backdropBreakpoint` property 😊