Split Pane in Ionic

Ionic 2.2.0 brought us a new SplitPane component that’s perfect for apps that also target desktops and large tablets. The SplitPane component is very easy to use and opens up possibilities to more easily create apps that adapt to any screen size. Below are screenshot examples of what we’ll build in this post.

Follow the instructions here to upgrade to version 2.2.0 of Ionic.

Split Pane on Larger Displays Split Pane on large screens

Split Pane disappears on smaller displays Split Pane on small screens

App Component

Use <ion-split-pane> to wrap around the main <ion-nav> component and add the main directive to it so that Ionic knows what should go in the right part of the split pane:

app.html

<ion-split-pane>

  <!-- ... -->

  <ion-nav [root]="rootPage" main></ion-nav>

</ion-split-pane>

Now add also add a reference variable to the ion-nav component and an <ion-menu> component that references the ion-nav component with the content property binding:

<ion-split-pane>

  <ion-menu [content]="someContent">
    <!-- ... -->
  </ion-menu>

  <ion-nav [root]="rootPage" #someContent main></ion-nav>

</ion-split-pane>

And from that point you’re pretty much good to go! Ionic will take care of the layout automagically.

By default the breakpoint is set so that the split pane will disappear if the viewport is less than 768px, but you can change that behavior with the when property binding on the ion-split-pane component.

Here are a few examples:

<ion-split-pane when="(min-width: 550px)">
  <!-- ... -->
</ion-split-pane>

<!-- Or -->

<ion-split-pane when="sm">
  <!-- ... -->
</ion-split-pane>

<!-- Or -->

<ion-split-pane [when]="checkSize()">
  <!-- ... -->
</ion-split-pane>

As you can see, you can specify a media query to match or a defined media query abbreviation (xs, sm, md, lg or xl) or even bind to a property or method that should return true or false.

Each pane also gets its own navigation component (ion-nav), so you can create navigation within the side pane.

Here’s the final markup for our example:

app.html

<ion-split-pane when="(min-width: 550px)">

  <ion-menu [content]="someContent">
    <ion-header>
      <ion-toolbar>
        <ion-title>
          Menu
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item (click)="setCategory('nature')">
          <ion-avatar item-left>
            <img src="https://source.unsplash.com/category/nature/100x100">
          </ion-avatar>
          <h2>Nature</h2>
        </ion-item>
        <ion-item (click)="setCategory('food')">
          <ion-avatar item-left>
            <img src="https://source.unsplash.com/category/food/100x100">
          </ion-avatar>
          <h2>Food</h2>
        </ion-item>
        <ion-item (click)="setCategory('people')">
          <ion-avatar item-left>
            <img src="https://source.unsplash.com/category/people/100x100">
          </ion-avatar>
          <h2>People</h2>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-nav [root]="rootPage" #someContent main></ion-nav>

</ion-split-pane>

And in this specific example we simply change the value for the rootPage property when the user clicks on one of the side pane items:

app.component.ts

// ...

import { HomePage } from '../pages/home/home';
import { FoodPage } from '../pages/food/food';
import { NaturePage } from '../pages/nature/nature';
import { PeoplePage } from '../pages/people/people';

// ...

export class MyApp {
  rootPage: any = HomePage;

  constructor() { }

  category: any;

  setCategory(category) {
    switch (category) {
      case 'nature':
        this.rootPage = NaturePage;
        break;
      case 'food':
        this.rootPage = FoodPage;
        break;
      case 'people':
        this.rootPage = PeoplePage;
        break;
    }
  }
}

In order for a menu button to appear automatically when the side pane is closed, make sure to add a button with the menuToggle directive in your pages. In our example, we add a button to the navbar. Ionic hides the menuToggle button when the side pane is visible:

food.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      🍗 Food
    </ion-title>
  </ion-navbar>
</ion-header>

Further Reading

Refer to the official API documentation to learn more.

Search

🔎 Searching...