Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

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>
Size Value Description
xs (min-width: 0px) Show the split-pane when the min-width is 0px (meaning, always)
sm (min-width: 576px) Show the split-pane when the min-width is 576px
md (min-width: 768px) Show the split-pane when the min-width is 768px (default break point)
lg (min-width: 992px) Show the split-pane when the min-width is 992px
xl (min-width: 1200px) Show the split-pane when the min-width is 1200px

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

Attr Type Details
enabled boolean

If false, the split-pane is disabled, ie. the side pane will never be displayed. Default true.

when string | boolean

When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.

Output Events

Attr Details
ionChange

Expression to be called when the split-pane visibility has changed

Sass Variables

Property Default Description
$split-pane-ios-side-min-width $split-pane-side-min-width

Minimum width of the split-pane's side pane

$split-pane-ios-side-max-width $split-pane-side-max-width

Maximum width of the split-pane's side pane

$split-pane-ios-border $hairlines-width solid $list-ios-border-color

Border style of the side pane

Property Default Description
$split-pane-md-side-min-width $split-pane-side-min-width

Minimum width of the split-pane's side pane

$split-pane-md-side-max-width $split-pane-side-max-width

Maximum width of the split-pane's side pane

$split-pane-md-border 1px solid $list-md-border-color

Border style of the side pane

Property Default Description
$split-pane-wp-side-min-width $split-pane-side-min-width

Minimum width of the split-pane's side pane

$split-pane-wp-side-max-width $split-pane-side-max-width

Maximum width of the split-pane's side pane

$split-pane-wp-border 1px solid $list-wp-border-color

Border style of the side pane

API

Native

General