SplitPane

ion-split-pane

Improve this doc

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.

If the devices screen size is below a certain size, the SplitPane will collapse and the menu will become hidden again. This is especially useful when creating an app that will be served over a browser or deployed through the app store to phones and tablets.

Usage

To use SplitPane, simply add the component around your root component. In this example, we'll be using a sidemenu layout, similar to what is provided from the sidemenu starter template.

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

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

Here, SplitPane will look for the element with the main attribute and make that the central component on larger screens. The main component can be any Ionic component (ion-nav or ion-tabs) 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)">

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

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

SplitPane also provides some predefined media queries that can be used.

<!-- could be "xs", "sm", "md", "lg", or "xl" -->
<ion-split-pane when="lg">
...
</ion-split-pane>

You can also pass in boolean values that will trigger SplitPane when the value or expression evaluates to true.

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

class MyClass {
  public isLarge = false;
  constructor(){}
}

Or

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

class MyClass {
  constructor(){}
  shouldShow(){
    if(conditionA){
      return true
    } else {
      return false
    }
  }
}

Input Properties

Output Events

Sass Variables