Ionic 2：下からスライドメニューを作る方法

Question

まあ、それは正確にスライディングメニューと見なされるかわかりません。ナビゲーション用ではなく、データを保持します。私のインスピレーションは、アップル地図から来た：

だから私は、必要に応じてそれを上下にスライドさせてできるようにすると最初に表示されたコンテンツをスクロールできるようにしたいです画像。また、光/ぼかし効果をマップで拡散する方法はありますか？

Answer 1

ジョシュ・モロニーの素晴らしい投稿があります。それは、hereと非常に似ています。これが結果です：

Hereあなたがソースコードとその使用方法を見つけることができます。最も関連性の高い部分は、以下のとおりです。

コンポーネントコード：

import { Component, Input, ElementRef, Renderer } from '@angular/core'; 
import { Platform, DomController } from 'ionic-angular'; 

@Component({ 
    selector: 'content-drawer', 
    templateUrl: 'content-drawer.html' 
}) 
export class ContentDrawer { 

    @Input('options') options: any; 

    handleHeight: number = 50; 
    bounceBack: boolean = true; 
    thresholdTop: number = 200; 
    thresholdBottom: number = 200; 

    constructor(public element: ElementRef, public renderer: Renderer, public domCtrl: DomController, public platform: Platform) { 

    } 

    ngAfterViewInit() { 

    if(this.options.handleHeight){ 
     this.handleHeight = this.options.handleHeight; 
    } 

    if(this.options.bounceBack){ 
     this.bounceBack = this.options.bounceBack; 
    } 

    if(this.options.thresholdFromBottom){ 
     this.thresholdBottom = this.options.thresholdFromBottom; 
    } 

    if(this.options.thresholdFromTop){ 
     this.thresholdTop = this.options.thresholdFromTop; 
    } 

    this.renderer.setElementStyle(this.element.nativeElement, 'top', this.platform.height() - this.handleHeight + 'px'); 
    this.renderer.setElementStyle(this.element.nativeElement, 'padding-top', this.handleHeight + 'px'); 

    let hammer = new window['Hammer'](this.element.nativeElement); 
    hammer.get('pan').set({ direction: window['Hammer'].DIRECTION_VERTICAL }); 

    hammer.on('pan', (ev) => { 
     this.handlePan(ev); 
    }); 

    } 

    handlePan(ev){ 

    let newTop = ev.center.y; 

    let bounceToBottom = false; 
    let bounceToTop = false; 

    if(this.bounceBack && ev.isFinal){ 

     let topDiff = newTop - this.thresholdTop; 
     let bottomDiff = (this.platform.height() - this.thresholdBottom) - newTop;  

     topDiff >= bottomDiff ? bounceToBottom = true : bounceToTop = true; 

    } 

    if((newTop < this.thresholdTop && ev.additionalEvent === "panup") || bounceToTop){ 

     this.domCtrl.write(() => { 
     this.renderer.setElementStyle(this.element.nativeElement, 'transition', 'top 0.5s'); 
     this.renderer.setElementStyle(this.element.nativeElement, 'top', '0px'); 
     }); 

    } else if(((this.platform.height() - newTop) < this.thresholdBottom && ev.additionalEvent === "pandown") || bounceToBottom){ 

     this.domCtrl.write(() => { 
     this.renderer.setElementStyle(this.element.nativeElement, 'transition', 'top 0.5s'); 
     this.renderer.setElementStyle(this.element.nativeElement, 'top', this.platform.height() - this.handleHeight + 'px'); 
     }); 

    } else { 

     this.renderer.setElementStyle(this.element.nativeElement, 'transition', 'none'); 

     if(newTop > 0 && newTop < (this.platform.height() - this.handleHeight)) { 

     if(ev.additionalEvent === "panup" || ev.additionalEvent === "pandown"){ 

      this.domCtrl.write(() => { 
      this.renderer.setElementStyle(this.element.nativeElement, 'top', newTop + 'px'); 
      }); 

     } 

     } 

    } 

    } 

} 

ビュー：

<ion-content> 
    <ng-content></ng-content> 
</ion-content> 

スタイル：

.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); 

    } 

} 

---

アンは、このようなあなたのページにそれを使用

：

ホームページ：

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    drawerOptions: any; 

    constructor(public navCtrl: NavController) { 

     this.drawerOptions = { 
      handleHeight: 50, 
      thresholdFromBottom: 200, 
      thresholdFromTop: 200, 
      bounceBack: true 
     }; 

    } 

} 

ビュー：

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     Ionic Blank 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    The world is your oyster. 
    <p> 
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide. 
    </p> 
</ion-content> 

<content-drawer [options]="drawerOptions"> 
    <div class="content"> 
     The world is your oyster. 
     <p> 
     If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide. 
     </p> 
    </div> 
</content-drawer> 

スタイル：

.ios, .md { 

    page-home { 

     content-drawer { 
      background-color: #34495e !important; 
     } 

     content-drawer .content { 
      padding: 20px; 
     } 

    } 

}