ion-split-pane | Ionic Framework

A split pane is useful when creating multi-view layouts. It allows UI elements, like menus, to be displayed as the viewport width increases.

If the device's screen width is below a certain size, the split pane will collapse and the menu will be hidden. This is ideal for creating an app that will be served in a browser and deployed through the app store to phones and tablets.

By default, the split pane will expand when the screen is larger than 992px. To customize this, pass a breakpoint in the when property. The when property can accept a boolean value, any valid media query, or one of Ionic's predefined sizes.

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

<!-- can be any valid media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries -->
<ion-split-pane when="(min-width: 40px)"></ion-split-pane>

No public methods available for this component.

No CSS shadow parts available for this component.

No slots available for this component.