ionicframework SplitPane is a component that makes it possible to create multi-view layout.Similar to iPad apps, SplitPane allows UI elements, like Menus, to be displayed as the viewport increases.The new SplitPane component is perfect for apps that target desktops and large tablets. The SplitPane component is very easy to use and If the devices screen size is below a certain size, the SplitPane will collapse and the menu will become hidden again.


To use SplitPane, Simply add the <ion-split-pane> around your root component ie. <ion-nav>, and add the main attribute to it . In this example, we'll be using a sidemenu layout template.

Code to implement SplitPane in ionic 2, just copy and paste in app.html

<ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
   <ion-content>

       <!-- the content body -->
   </ion-content>
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="root" #content></ion-nav>

add <ion-split-pane> component to wrap around the main <ion-nav> component like this.

<ion-split-pane>
  <!--  side menu  -->
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
   <ion-content>

       <!-- content body -->
   </ion-content>
  </ion-menu>

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

Now, add the main attribute to it so that Ionic knows what should go in the right part of the ionic split pane, ie the central component on the larger screens.

<ion-split-pane>

  <!-- ... -->

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

</ion-split-pane>

that's it, now if you play with your browser window by adjusting its layout size. you can see the side menu pane changing. By default, SplitPane will oly appear if the screen is larger than 768px. we can customize this, by using when input property on ion-split-pane component as shown below.

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

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

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

Ionic SplitPane can alse be given some predefined media queries that can be used. they are "xs", "sm", "md", "lg", and "xl". these specify the minimum width required to split the ionic-pane.

<ion-split-pane when="xs">
...
</ion-split-pane>

here, xs : means min-width is 0px, this will make the split-pane to appear always. sm: means min-width is 576px, this will make the split-pane to appear when the min-width is 576px md: means min-width is 768px,this will show the split-pane when the min-width is 768px (default break point) lg: means min-width is 992px, this will make the split-pane to appearwhen the min-width is 992px xl: means min-width is 1200px, this will show the split-pane split-pane when the min-width is 1200px One can also pass boolean values to it so that, it will trigger SplitPane when the value or expression evaluates to true.

<ion-split-pane [when]="isSmall">
 
</ion-split-pane>

in .ts file above constructer add this

class MySplittPaneClass {

  public isSmall= true;
  constructor(){}

}

or, you can call a method like this

<ion-split-pane [when]="showSplitScreen()">

</ion-split-pane>

in respectedd .ts file add this,

class MySplittPaneClass {

  constructor(){}

  showSplitScreen(){

    if(conditionA){
      return true;
    } else {
      return false;
    }

  }

}

Disable ionSplitPane

to disable or enable split pane in ionic project, use input property "enable". it takes boolean as value. If the value is false, the split-pane will be disabled, ie. the side pane will never be displayed. the enable input property default's to true.