There's a fantastic blog post by Josh Morony that delves into a topic closely related to this. You can check it out here. Here is the result:
https://i.stack.imgur.com/ocYeH.gif
If you're interested in exploring further, you can find the complete source code and instructions on how to use it here. The key components include:
Snippet of Component code:
import { Component, Input, ElementRef, Renderer } from '@angular/core';
// Other imports...
@Component({
selector: 'content-drawer',
templateUrl: 'content-drawer.html'
})
export class ContentDrawer {
// Class content...
}
View structure:
<ion-content>
<ng-content></ng-content>
</ion-content>
Relevant Styles:
.ios, .md {
content-drawer {
width: 100%;
height: 100%;
position: absolute;
z-index: 10 !important;
box-shadow: 0px -4px 22px -8px rgba(0,0,0,0.75);
}
}
To integrate this component into your page, follow these steps:
In your HomePage file:
import { Component } from '@angular/core';
// Other imports...
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
drawerOptions: any;
constructor(public navCtrl: NavController) {
// Initialize options for the drawer...
}
}
Layout Structure:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
Your content here.
<p>
Link to documentation: <a href="http://ionicframework.com/docs/v2">docs</a>
</p>
</ion-content>
<content-drawer [options]="drawerOptions">
<div class="content">
Additional content.
<p>
More info available in the <a href="http://ionicframework.com/docs/v2">docs</a>.
</p>
</div>
</content-drawer>
Custom Styles:
.ios, .md {
page-home {
content-drawer {
background-color: #34495e !important;
}
content-drawer .content {
padding: 20px;
}
}
}