{"id":3983,"date":"2021-12-14T16:58:06","date_gmt":"2021-12-14T16:58:06","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3983"},"modified":"2021-12-15T00:54:19","modified_gmt":"2021-12-15T00:54:19","slug":"5-examples-of-the-new-ionic-6-bottom-sheet-modal","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/5-examples-of-the-new-ionic-6-bottom-sheet-modal","title":{"rendered":"5 Examples of the new Ionic 6 Bottom Sheet Modal"},"content":{"rendered":"

\n This is a guest post from Simon Grimm, Ionic Insider and educator at the Ionic Academy<\/a>. Simon just released a brand new eBook called Built with Ionic<\/a> where he breaks down popular apps like Netflix and rebuilds them completely with Ionic styling and interactions!\n<\/p><\/blockquote>\n

The Ionic 6 modal comes with a brand new presentation mode called bottom sheet<\/strong>, which is usually also known as bottom drawer<\/em> in mobile applications.<\/p>\n

It is the third presentation style besides the default full screen modal and the iOS card modal, and in this tutorial we will explore five ways to use the new presentation.<\/p>\n

<\/p>\n

Ionic App Prerequisite<\/h2>\n

All you need to check out the following examples is a blank Ionic app, so go ahead and create a new app if you need one for testing:<\/p>\n

ionic start bottomModal blank --type=angular\n<\/code><\/pre>\n
If you use your own project, make sure your app is using Ionic 6 by running the following command and then checking your package.json<\/strong> afterwards:<\/p>\n
npm i @ionic\/angular@latest\n<\/code><\/pre>\n
Note:<\/strong> Make sure your project is under source control before you migrate to a major new version and check out the breaking changes of v6<\/a> or follow the v6 upgrade guide<\/a> for information about React and Vue as well.<\/p>\n
1. Ionic Bottom Sheet Modal Basic<\/h2>\n
Let’s start with the basics – how can I get a bottom sheet modal?<\/em><\/p>\n
\"\"
For this simple case we generate a new page that will act as our content:<\/p>\n
ionic g page simpleModal\n<\/code><\/pre>\n
You could leave that page empty or put in a bit of dummy content, it won’t change the presentation logic.<\/p>\n
Anyway, if you want to see some elements on the screen, quickly bring up the src\/app\/simple-modal\/simple-modal.page.html<\/strong> and change it to:<\/p>\n
<ion-header>\n  <ion-toolbar>\n    <ion-title>Modal Content<\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header>\n\n<ion-content>\n\n  <ion-accordion-group>\n    <ion-accordion>\n      <ion-item slot="header">\n        <ion-label>People<\/ion-label>\n      <\/ion-item>\n\n      <ion-list slot="content">\n        <ion-item>\n          <ion-label>Max<\/ion-label>\n        <\/ion-item>\n        <ion-item>\n          <ion-label>Mike<\/ion-label>\n        <\/ion-item>\n        <ion-item>\n          <ion-label>Kim<\/ion-label>\n        <\/ion-item>\n      <\/ion-list>\n    <\/ion-accordion>\n\n  <\/ion-accordion-group>\n\n<\/ion-content>\n<\/code><\/pre>\n
\n  Oh, you never saw the ion-accordion-group<\/code> before? Another new component of Ionic 6, and we will talk about that in another dedicated post!\n<\/p><\/blockquote>\n
For now we need to focus on the presentation of the modal, and to get the bottom sheet you have to set the breakpoints<\/code> and initialBreakpoints<\/code> value when creating the modal.<\/p>\n
Let’s do this right now by changing the src\/app\/home\/home.page.ts<\/strong> to:<\/p>\n
import { Component } from '@angular\/core';\nimport { ModalController } from '@ionic\/angular';\nimport { SimpleModalPage } from '..\/simple-modal\/simple-modal.page';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: 'home.page.html',\n  styleUrls: ['home.page.scss'],\n})\nexport class HomePage {\n\n  constructor(private modalCtrl: ModalController) {}\n\n  async presentModal() {\n    const modal = await this.modalCtrl.create({\n      component: SimpleModalPage,\n      breakpoints: [0, 0.3, 0.5, 0.8],\n      initialBreakpoint: 0.5\n    });\n    await modal.present();\n  }\n}\n<\/code><\/pre>\n
The breakpoints<\/code> value is an array of values between 0 and 1, and defines at which percentage of your screen the modal snaps<\/strong> when the user drags it.<\/p>\n
When the modal comes up, it will open initially to the initialBreakpoint<\/code>, which needs to be one value that you’ve added to the array of breakpoints<\/code>.<\/p>\n
It’s really that easy, and you might already have tons of ideas to use this new modal. Let’s take a look at another helpful example.<\/p>\n
2. Pass Data to your Modal with Background Update<\/h2>\n
Because the bottom sheet usually doesn’t cover your whole screen, reacting to changes made in the modal becomes more important.<\/p>\n
\"\"
But there’s an easy solution to keep an active link<\/strong> between your page and the modal, and we will do this within another new page:<\/p>\n
ionic g page updateModal\n<\/code><\/pre>\n
The idea is quite easy: We pass a BehaviorSubject<\/code> into the componentProps<\/code> of the modal just like we would pass any other input.<\/p>\n
By doing this, we can subscribe()<\/code> to the changes on our page and later emit new values within the modal!<\/p>\n
\n  I’ve used this pattern inside my new eBook Built with Ionic<\/a> – check it out if you want to build even more epic interfaces with Animations and Gestures!\n<\/p><\/blockquote>\n
Imagine you want to display a selection of the payment method, which could be easily handled with the bottom sheet.<\/p>\n
We can start by presenting the modal with the Subject inside the src\/app\/home\/home.page.ts<\/strong>:<\/p>\n
import { Component } from '@angular\/core';\nimport { ModalController } from '@ionic\/angular';\nimport { BehaviorSubject } from 'rxjs';\nimport { UpdateModalPage } from '..\/update-modal\/update-modal.page';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: 'home.page.html',\n  styleUrls: ['home.page.scss'],\n})\nexport class HomePage {\n  choice = 'Credit Card';\n\n  constructor(private modalCtrl: ModalController) {}\n\n  async presentModal() {\n    const mySubject = new BehaviorSubject(this.choice);\n\n    const modal = await this.modalCtrl.create({\n      component: UpdateModalPage,\n      breakpoints: [0, 0.2],\n      initialBreakpoint: 0.2,\n      handle: false,\n      componentProps: {\n        mySubject\n      },\n    });\n    await modal.present();\n\n    mySubject.subscribe((value: string) => {\n      this.choice = value;\n    });\n\n    modal.onDidDismiss().then((_ => {\n      mySubject.unsubscribe();\n    }));\n  }\n}\n<\/code><\/pre>\n
Of course we also unsubscribe()<\/code> when the modal is dismissed to prevent memory leaks!<\/p>\n
Now we can change the src\/app\/home\/home.page.html<\/strong> so we can see our choice in the background of the main page:<\/p>\n
<ion-header>\n  <ion-toolbar color="primary">\n    <ion-title>\n      Ionic Modal\n    <\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header>\n\n<ion-content class="ion-padding">\n  <ion-text color="tertiary" class="ion-text-center">\n    <h2>Your choice: {{ choice }}<\/h2>\n  <\/ion-text>\n  <ion-button expand="full" (click)="presentModal()">Show modal<\/ion-button>\n<\/ion-content>\n<\/code><\/pre>\n
Next step is defining the @Input()<\/code> in our modal page, and a bit of additional logic so we can switch between different values on that page.<\/p>\n
To build a simple UI we not only need the string value but also a number to handle the change more easily (and use some conditional styling<\/em>), so go ahead and change the src\/app\/update-modal\/update-modal.page.ts<\/strong> to this:<\/p>\n
import { Component, Input, OnInit } from '@angular\/core';\nimport { ModalController } from '@ionic\/angular';\nimport { BehaviorSubject } from 'rxjs';\n\n@Component({\n  selector: 'app-update-modal',\n  templateUrl: '.\/update-modal.page.html',\n  styleUrls: ['.\/update-modal.page.scss'],\n})\nexport class UpdateModalPage implements OnInit {\n  choice = 0;\n  @Input() mySubject: BehaviorSubject<string>;\n  choices = [\n    'Credit Card',\n    'Paypal',\n    'Bank transfer'\n  ];\n\n  constructor(private modalCtrl: ModalController) { }\n\n  \/\/ Set the initial choice based on the input\n  ngOnInit() {\n    const preselect = this.mySubject.value;    \n    this.choice = this.choices.indexOf(preselect);\n  }\n\n  \/\/ Change the choice and update the Subject\n  changeChoice(num) {\n    this.choice = num;\n    this.mySubject.next(this.choices[num]);\n  }\n\n  close() {\n    this.modalCtrl.dismiss();\n  }\n}\n<\/code><\/pre>\n
We now have the current selection as a number inside choice<\/code>, so we can build simple logic with three buttons and conditional styling around it within our src\/app\/update-modal\/update-modal.page.html<\/strong>:<\/p>\n
<ion-content>\n  <ion-row>\n    <ion-col size="12" class="ion-text-center" class="category-select">\n      <ion-button size="small" shape="round" (click)="changeChoice(0)" [class.selected]="choice == 0">\n        Credit Card\n      <\/ion-button>\n      <ion-button size="small" shape="round" (click)="changeChoice(1)" [class.selected]="choice == 1">\n        Paypal\n      <\/ion-button>\n      <ion-button size="small" shape="round" (click)="changeChoice(2)" [class.selected]="choice == 2">\n        Bank transfer\n      <\/ion-button>\n    <\/ion-col>\n  <\/ion-row>\n\n  <ion-button expand="block" color="primary" strong="true" (click)="close()" class="ion-margin-top">\n    Confirm\n  <\/ion-button>\n<\/ion-content>\n<\/code><\/pre>\n
Every button will now select a different value, and the changeChoice()<\/code> function will update the subject – the parent immediately gets the new choice!<\/p>\n
To make the selection look more pretty you can add some easy CSS inside the src\/app\/update-modal\/update-modal.page.scss<\/strong> like this:<\/p>\n
.category-select {\n  ion-button {\n    color: var(--ion-color-primary);\n    --background: transparent;\n    --background-activated: var(--ion-color-primary);\n  }\n\n  .selected {\n    font-weight: 600;\n    color: #fff;\n    --background: var(--ion-color-primary);\n  }\n}\n<\/code><\/pre>\n
Selecting a new payment method was never more fun!<\/p>\n
Of course this was just the most basic example, but presenting small overlays like this for a quick selection can really unclutter the rest of your form or overall UI!<\/p>\n
Speaking of simplifying things…<\/p>\n
3. Using an Inline Modal<\/h2>\n
Ever think  you just need a simple modal and don’t want the usual way by creating another page, importing it, putting in your styling…?<\/p>\n
Turns out that’s easier than ever by directly using a modal inline and adding a trigger<\/strong>!<\/p>\n
The only thing we actually need is a piece of HTML that defines an id<\/code> like the ion-button<\/code> below.<\/p>\n
Now we can set the trigger<\/code> on the modal to the same value and boom – clicking the trigger brings up the modal.<\/p>\n
Go ahead and change the src\/app\/home\/home.page.html<\/strong> to this:<\/p>\n
<ion-header>\n  <ion-toolbar color="primary">\n    <ion-title>\n      Ionic Modal\n    <\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header>\n\n<ion-content class="ion-padding">\n\n  <ion-button expand="full" id="openModal">\n    I open the modal\n  <\/ion-button>\n\n  <ion-modal trigger="openModal" [initialBreakpoint]="0.5" [breakpoints]="[0, 0.5, 1]">\n    <ng-template>\n      <ion-header>\n        <ion-toolbar color="primary">\n          <ion-title>\n            Inline\n          <\/ion-title>\n        <\/ion-toolbar>\n      <\/ion-header>\n      <ion-content>\n        <ion-item>\n          This is so cool!\n          <p>And a bit funny<\/p>\n        <\/ion-item>\n      <\/ion-content>\n    <\/ng-template>\n  <\/ion-modal>\n\n<\/ion-content>\n<\/code><\/pre>\n
See how we can even inject our breakpoints<\/code> and initialBreakpoint<\/code>?<\/p>\n
This is a super convenient way if you need a simple modal and not the overhead of adding another page to your project.<\/p>\n
4. Use the Modal as a Toast<\/h2>\n
Having scrollable content inside the modal is pretty cool, but have you thought about using it for a toast-like presentation of some information?<\/p>\n
\"\"
You can certainly do it with just a bit of additional styling!<\/p>\n
Again, let’s generate a new page first:<\/p>\n
ionic g page toastModal\n<\/code><\/pre>\n
The creation of the modal is mostly the same, but this time we also set the handle<\/code> property to false so we get rid of that little grey notch at the top, and we also define a custom cssClass<\/code>.<\/p>\n
On top of that we use setTimeout()<\/code> to directly hide the todal<\/em> (leave a comment with a better name for this!) again, so let’s change the src\/app\/home\/home.page.ts<\/strong> to this now:<\/p>\n
import { Component } from '@angular\/core';\nimport { ModalController } from '@ionic\/angular';\nimport { ToastModalPage } from '..\/toast-modal\/toast-modal.page';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: 'home.page.html',\n  styleUrls: ['home.page.scss'],\n})\nexport class HomePage {\n\n  constructor(private modalCtrl: ModalController) { }\n\n  async presentModal() {\n    const modal = await this.modalCtrl.create({\n      component: ToastModalPage,\n      breakpoints: [0, 0.3],\n      initialBreakpoint: 0.3,\n      cssClass: 'custom-modal',\n      handle: false\n    });\n    await modal.present();\n\n    \/\/ Optional: Hide the modal after a duration!\n    setTimeout(() => {\n      modal.dismiss();\n    }, 2000);\n  }\n\n}\n<\/code><\/pre>\n
For the content itself we need to be careful now, as we don’t really want a scrollable area and also need a transparent background to make it look better.<\/p>\n
Therefore we just wrap the content in our src\/app\/toast-modal\/toast-modal.page.html<\/strong> within a simple div<\/code> and replace everything inside the file with:<\/p>\n
<div class="ion-padding ion-text-center content">\n\n  <ion-text color="primary">\n    <h2>Great success!<\/h2>\n  <\/ion-text>\n  <ion-icon name="checkmark-done-circle-outline" size="large" color="success"><\/ion-icon>\n\n<\/div>\n<\/code><\/pre>\n
To make our element stand out with some background, we can add the following as a simple box styling to the src\/app\/toast-modal\/toast-modal.page.scss<\/strong>:<\/p>\n
.content {\n    background: #fff;\n    margin: 20px;\n    border-radius: 8px;\n}\n<\/code><\/pre>\n
You’ll notice that at this point your modal is still taking up the full width. In fact it’s actually just the background color of the modal.<\/p>\n
Good thing we added a custom CSS class when we created the modal, so now we can style the modal at the top of our application inside the src\/global.scss<\/strong>:<\/p>\n
.custom-modal {\n    --background: transparent;\n}\n<\/code><\/pre>\n
Now the modal has no background anymore, and since our simple box has margin<\/code> it looks like it’s floating in the air.<\/p>\n
Of course, a super simple toast like this could be created with the Ionic Toast<\/a> as well, but when you think about adding some buttons or a bit more functionality, this alternative to a standard toast will suit you a lot better!<\/p>\n
5. Custom Styling with Parts<\/h2>\n
We’ve scratched the surface of styling in the previous example, but let’s see exactly how to customize every piece of the bottom sheet modal<\/strong>.<\/p>\n
\"Bottom
Again, it’s important to add your custom CSS class to the creation for this, so one last time change the src\/app\/home\/home.page.ts<\/strong> to reuse our initial page:<\/p>\n
import { Component } from '@angular\/core';\nimport { ModalController } from '@ionic\/angular';\nimport { SimpleModalPage } from '..\/simple-modal\/simple-modal.page';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: 'home.page.html',\n  styleUrls: ['home.page.scss'],\n})\nexport class HomePage {\n\n  constructor(private modalCtrl: ModalController) { }\n\n  async presentModal() {\n    const modal = await this.modalCtrl.create({\n      component: SimpleModalPage,\n      breakpoints: [0, 0.4, 1],\n      initialBreakpoint: 0.4,\n      cssClass: 'custom-modal'\n    });\n    await modal.present();\n  }\n\n}\n<\/code><\/pre>\n
Now you can theme your modal with different CSS properties<\/a>, but to get full control you have to use the documented shadow parts<\/a>!<\/p>\n
If you have never used parts make sure to check out the introduction to CSS Shadow Parts<\/a> from Brandy as well!<\/p>\n
The TL;DR version is this: You usually can’t style a shadow component from the outside and only inject styling through the CSS variables that Ionic offers for every component.<\/p>\n
However, if a part is declared within a component, you can directly target that element even if it’s within the Shadow DOM and inject your own styling!<\/p>\n
This means for our modal we can use these three available parts:<\/p>\n