An alternative to md-bottom-sheet in ionic 2+

Ionic Framework ionic-v3
1

Hi guys, is there any built in way or component to reproduce the behaviour of md-bottom-sheet of Angular 1 material design in ionic 2 / ionic 3?

Reference: https://material.angularjs.org/latest/demo/bottomSheet , the show as grid is what i’m referring to

I was looking into ActionSheet, but it’s not exactly what i need, as i want to display multiple options in a grid (icons only).

Thank you!

2

After further research i’ve been able to recreate the behaviour using the ionic modal, setting the components div to absolute position (top:50%). On the smaller devices it’s important to override media query that hides the backdrop.

The only issue now is that enableBackdropDismiss is not working, as the backdrop is still covered by .modal-wrapper - which can be solved by again overriding the css, but this will affect all other modals.

Is there a way to apply custom class on specific modal’s .modal-wrapper?

4

I’ve found a final solution that satisfies the requirement completely:

Using a ionic modal with a custom class name, i am able to override the css only for this popup and make it behave like a bottom sheet from material design -

to open the bottom sheet:

openBottomSheet() {
   let sheetModal = this.modalCtrl.create(ManagerSheet,{},{showBackdrop:true, enableBackdropDismiss:true});
   sheetModal.present();
 }

component used in modal:

import { Component, Renderer } from '@angular/core';
import {   ViewController } from 'ionic-angular';
 
@Component({
  selector: 'manager-sheet',
  templateUrl: 'manager-sheet.html'
})
export class ManagerSheet {

  text: string;

  constructor(public renderer: Renderer, public viewCtrl: ViewController) {
    this.renderer.setElementClass(viewCtrl.pageRef().nativeElement, 'manager-sheet', true);
   
  }

}

HTML file:

<div class="manager-sheet-content">
 <!-- ... content of the bottom sheet -->
</div>

and finaly the SCSS:

ion-modal.manager-sheet ion-backdrop {
    visibility: visible !important;
    z-index:0;
}
ion-modal.manager-sheet .modal-wrapper{
    bottom:0;
    width:100%;
    height:300px;
    position:absolute;
}
.manager-sheet-content{
    background:#fff;
    width: 100%;
    height:300px;
    padding: 20px;
}
2 Likes