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

Ionic Framework ionic-v3
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