ion-split-pane
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 for more information.
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.
<!-- 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
Properties
contentId
| Description | メインコンテンツの id です。ルータを使用する場合は、通常 ion-router-outlet となります。ルータを使用しない場合は、通常、メインビューの ion-content となります。これは ion-menu 内の ion-content の ID ではありません。 |
| Attribute | content-id |
| Type | string ｜ undefined |
| Default | undefined |
disabled
| Description | trueの場合、分割ペインが非表示になります。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
when
| Description | 分割パネルを表示するタイミング。CSSメディアクエリ式、またはショートカット式を指定します。また、ブーリアン表現も可能です。 |
| Attribute | when |
| Type | boolean ｜ string |
| Default | QUERY['lg'] |
Events
| Name | Description |
|---|---|
ionSplitPaneVisible | 分割画面の表示が変わったときに呼び出される式 |
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--border | ペイン間のボーダー |
--side-max-width | サイドペインの最大幅を指定します。分割ペインが折りたたまれた状態では適用されません。 |
--side-min-width | サイドペインの最小幅を指定します。分割ペインが折りたたまれた状態では適用されません。 |
--side-width | サイドペインの幅を指定します。分割ペインが折りたたまれた状態では適用されません。 |
Slots
No slots available for this component.