Ionic

SplitPaneを使ってみる

  • POST
この記事はIonic Advent Calendar 2017の8日目の記事です。 フリーランスの村上です。Ionicを使用してv1の頃からアプリを作成しています。 SplitPaneはデスクトップまたはiPadなどのタブレット向けに利用できるコンポーネントです。ざっくり言ってしまえば普段利用しているMenuコンポーネントを常時表示した状態になります。 現在仕事で作っているサイトでSplitPaneを利用しています。実現したいことに対して詰まったのでコードを紹介しようと思います。 まずはサンプルベースでSplitPaneを表示してみます。 一般的なサイドメニューがあるアプリコードをion-split-paneタグで囲むだけで利用できます。簡単ですね。 <!-- app.html --> <ion-split-pane> <!-- our side menu --> <ion-menu [content]="content"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <button ion-item *ngFor="let item of menu1" (click)="changeRoot(item.pageName)"> {{item.label}} </button> </ion-list> </ion-content> </ion-menu> <!-- the main content --> <ion-nav [root]="rootPage" main #content></ion-nav> </ion-split-pane> // menu.ts export interface Menu { pageName: string; label: string; } // app.component.ts @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage: any = 'HomePage'; menu1: Array<Menu> = [ { pageName: 'HomePage', label: 'Home', }, { pageName: 'PushRootPage', label: 'PushRoot', }, ]; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.