ion-split-pane
拆分面板在创建多视图布局时非常有用。它允许在视口宽度增加时显示UI元素，例如菜单。
如果设备屏幕宽度低于特定尺寸，拆分面板将会折叠，菜单将被隐藏。这对于创建既可以通过浏览器访问，又能通过应用商店部署到手机和平板的应用程序来说非常理想。
基本用法
备注
此演示将 when 属性设置为 'xs'，因此拆分面板始终显示。如果您希望拆分面板在较小的视口上折叠，您的 Ionic 应用则不需要此设置。详细信息请参见 设置断点。
设置断点
默认情况下，当屏幕宽度大于 992px 时，拆分面板会展开。要自定义此行为，可以在 when 属性中传递一个断点。when 属性可以接受布尔值、任何有效的媒体查询或 Ionic 预定义的尺寸之一。
<!-- 可以是 "xs"、"sm"、"md"、"lg" 或 "xl" -->
<ion-split-pane when="md"></ion-split-pane>
<!-- 可以是任何有效的媒体查询 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries -->
<ion-split-pane when="(min-width: 40px)"></ion-split-pane>
| 尺寸 | 值 | 描述 |
|---|---|---|
xs | (min-width: 0px) | 当最小宽度为 0px 时显示拆分面板（即始终显示） |
sm | (min-width: 576px) | 当最小宽度为 576px 时显示拆分面板 |
md | (min-width: 768px) | 当最小宽度为 768px 时显示拆分面板 |
lg | (min-width: 992px) | 当最小宽度为 992px 时显示拆分面板（默认断点） |
xl | (min-width: 1200px) | 当最 小宽度为 1200px 时显示拆分面板 |
主题定制
CSS 自定义属性
属性
contentId
| Description | The id of the main content. When using a router this is typically ion-router-outlet. When not using a router, this is typically your main view's ion-content. This is not the id of the ion-content inside of your ion-menu. |
| Attribute | content-id |
| Type | string ｜ undefined |
| Default | undefined |
disabled
| Description | If true, the split pane will be hidden. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
when
| Description | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. |
| Attribute | when |
| Type | boolean ｜ string |
| Default | QUERY['lg'] |
事件
| Name | Description | Bubbles |
|---|---|---|
ionSplitPaneVisible | Expression to be called when the split-pane visibility has changed | true |
方法
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
| Name | Description |
|---|---|
--border | Border between panes |
--side-max-width | Maximum width of the side pane. Does not apply when split pane is collapsed. |
--side-min-width | Minimum width of the side pane. Does not apply when split pane is collapsed. |
--side-width | Width of the side pane. Does not apply when split pane is collapsed. |
插槽
No slots available for this component.