Split Pane in Ionic

 

 
 

Ionic 2.2.0 was released with one very good feature which is Split Pane.

If you ever used Gmail App on tablet or iOS’s mail app on iPad, then Split Pane is quit familiar.

SplitPane
is component in ionic that creates multiple view layout like iPad apps.

It is nothing but the UI Elements that will be shown as the viewport increases.

When device screen size is below some certain size,splitpane will collapse.

Now let’s create a simple application for splitpane component in ionic

Note: Ionic version (>2.2.0)

If you don’t have basic setup for ionic app, then take a look at this article.

Then go to the root component file which is app.component.ts

1) USAGE
Now Apply the Split Pane component around the root component as below:

<br /><mark><ion-split-pane></mark><br /><span style="box-sizing: border-box; color: #999988; font-family: 'source code pro' , 'menlo' , 'monaco' , 'consolas' , 'courier new' , monospace; font-size: 13px; font-style: italic;"><!--  our side menu  --></span><br />  <ion-menu [content]="content"><br />  <ion-header><br />    <ion-toolbar><br />      <ion-title>Pages</ion-title><br />    </ion-toolbar><br />  </ion-header><br />  <ion-content><br />    <ion-list><br />      <button ion-item *ngFor="let p of pages" (click)="openPage(p)"><br />        {{p.title}}<br />     </button><br />    </ion-list><br />  </ion-content><br /></ion-menu><br /><br /><span style="box-sizing: border-box; color: #999988; font-family: 'source code pro' , 'menlo' , 'monaco' , 'consolas' , 'courier new' , monospace; font-size: 13px; font-style: italic;"><!--  the main content--></span><br /><ion-nav [root]="rootPage" #content swipeBackEnabled="false" <mark>main</mark>></ion-nav><br /><mark></ion-split-pane></mark>

As you can see from highlighted code, there is a main attribute, which tells ionic that make this component as central component on larger screen.

When you run this project using ionic serve, you will get following screen.


As you can see, there are two views
1. Left View (Menu items)
2. Right View (Main Content)

2) Breakpoints

You can also control the behavior of split pane, you can display split pane when you wish using when input

 

<br /><ion-split-pane <mark>when="(min-width: 500px)"</mark>><br /><br />  <!--  side menu  --><br /><br />  <ion-menu [content]="content"><br /><br />  ....<br /><br />  </ion-menu><br /><br />  <!-- main content --><br /><br />  <ion-nav [root]="root" main #content></ion-nav><br /><br /></ion-split-pane>
Here in the above example, Split Pane will be displayed when the viewport is atleast 500px.

Conditional
We can also make it conditional as below:

 

<br /><ion-split-pane <mark>[when]="isVisible"</mark> ><br /> ...<br /></ion-split-pane><br /><br />//class file<br />export class MyClass{<br /> <mark> public isVisible= false;</mark><br />}<br />

3) Events

Sometimes you may have situation when you want to listen for the events when SplitPane show or hide.
You can use ionic ionChange event to get track of it.
 
<br /><ion-split-pane <mark>(ionChange)="splitPaneChange($event)" </mark>><br /> ...<br /><br /></ion-split-pane><br /><br />//class file<br /><br />export class MyClass{<br /><br />   splitPaneChange(e) {<br /><br />    console.log("Split Pane Visible:",e._visible);<br /><br />  }<br /><br />}<br />
You can download demo from github repo:https://github.com/boradakash/ionic-split-pane-demo

 

Hope that helps.😊

 

I hope you like this Split Pane in Ionic article. 🙂

Also Read :