1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90---
title: 'ion-split-pane'
---
import Props from '@ionic-internal/component-api/v7/split-pane/props.md';
import Events from '@ionic-internal/component-api/v7/split-pane/events.md';
import Methods from '@ionic-internal/component-api/v7/split-pane/methods.md';
import Parts from '@ionic-internal/component-api/v7/split-pane/parts.md';
import CustomProps from '@ionic-internal/component-api/v7/split-pane/custom-props.mdx';
import Slots from '@ionic-internal/component-api/v7/split-pane/slots.md';
<head>
<title>ion-split-pane: Split Plane for Menus and Multi-View Layouts</title>
<meta
name="description"
content="ion-split-pane is useful when creating multi-view app layouts. It allows UI elements, like menus, to be displayed as the viewport width increases."
/>
</head>
import EncapsulationPill from '@components/page/api/EncapsulationPill';
<EncapsulationPill type="shadow" />
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.
## Basic Usage
:::note
This demo sets the `when` property to `'xs'` so the split pane always shows up. Your Ionic application does not need this if you want the split pane to collapse on smaller viewports. See [Setting Breakpoints](#setting-breakpoints) for more information.
:::
import Basic from '@site/static/usage/v7/split-pane/basic/index.md';
<Basic />
## Setting Breakpoints
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.
```html
<!-- 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>
```
| 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 |
| `lg` | `(min-width: 992px)` | Show the split-pane when the min-width is 992px (default break point) |
| `xl` | `(min-width: 1200px)` | Show the split-pane when the min-width is 1200px |
## Theming
### CSS Custom Properties
import CSSProperties from '@site/static/usage/v7/split-pane/theming/css-properties/index.md';
<CSSProperties />
## Properties
<Props />
## Events
<Events />
## Methods
<Methods />
## CSS Shadow Parts
<Parts />
## CSS Custom Properties
<CustomProps />
## Slots
<Slots />