This post is trending. 2,639 Views

Ionic 2 Split Pane

One step further on developing desktop app with Ionic with the release of Ionic 2.2.0 using the split pane component in Ionic. The split pane component allows side menu to always be displayed on large screen size.
Below is the preview what we are going to build.
ion7-main.gif
The final code for this tutorial can be found at the following github repo
https://github.com/lohanitech/IonSplitpane
Let’s get started using the split pane component.

If you have not worked with Ionic 2 before, I suggest you go throught our Getting started with Ionic 2 tutorial.

Begin by creating a new project using the command ionic start IonSplitpane tutorial --v2
Check if the project initiated correctly by serving the app using ionic serve and visiting “localhost:8100” on the browser. If everything went correctly you will see the following screen
ion7-1.png
Then open, “src/app/app.html” and update with following code

<ion-split-pane>
<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

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

Now if you have previously served the application, your browser should reload and you should see the following screen.
ion7-1

Looks like nothing is changed. But wait until you increase the screen size. Increase the size of the browser and you should see the changes as follows.
ion7-3.png
So, with split pane the ionic app splits the screen into side pane and main content in larger screens.

With the help of these new components, responsive grid and split pane, it is much more easier to develop web or desktop app with ionic 2.

All we did was added <ion-split-pane> as the root component and added main attribute to the <ion-nav> component. This main attribute is required by split pane to show the main content on larger screens. The main attribute can be assigned to any component except <ion-menu>.

Setting breakpoints

By default, SplitPane will expand when the screen is larger than 768px. If you want to customize this, use the when input. The when input can accept any valid media query, as it uses matchMedia() underneath.
<ion-split-pane when="(min-width: 475px)">

Fore more coustomization and complete api information on split pane please visit the official documentation

Related Posts

Advancde Ionic Components

If you are a Ionic developer, beginner or expert, you will love this project. Publicly being developed in github, ionic3-components repository hosts […]

This post is trending.

Setting up Ionic View for Testing Ionic App

Introduction Ionic View is by far the best thing Ionic framework provides. The problem with hybrid apps is that we need to […]

%d bloggers like this: