This post is trending. 2,805 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

This post is trending.

Let’s Make Desktop Application With Ionic 2 and Electron: Part 2

In part 1 of this tutorial we were able to Create an Ionic 2 project and serve Install electron dependencies in our […]

This post is trending.

Let’s Make Desktop Application With Ionic 2 and Electron: Part 1

With the addition of components like Split Pane and Responsive Grid, it is now easier than ever to develop a desktop application […]

%d bloggers like this: