February 17, 2017
  • All

Testing Split Pane Support

Max Lynch

CEO

Over the last month, Manu has been working hard on adding an oft-requested and powerful new feature to Ionic apps: Split Pane.

With Split Pane, it’s now easy to show a responsive side menu with side-by-side navigation controllers that will display on larger screens (such as the iPhone 7 plus, tablets, and desktops) and collapse
on small screens (such as portrait mode on most smartphones). With independent navigation controllers, the menu side of the split pane can navigate independently of the content side, or they can work in concert. Finally, the menu side can be fixed or displayed as a side menu.

Screen Shot 2017-02-16 at 19.18.25

To help test, install the latest nightly of Ionic (npm install --save ionic-angular@2.1.0-201702281739). For basic usage, simply wrap your <ion-menu> and <ion-nav> with the new <ion-split-pane> component:

<ion-split-pane>
  <ion-menu [content]="content">
  </ion-menu>
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main></ion-nav>
</ion-split-pane>

See the e2e tests for a full example of advanced usage (API Docs coming soon). Note: Split Pane is only available on Ionic 2.x and above.


Max Lynch

CEO