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
| 说明 | 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. |
| 属性 | content-id |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
disabled
| 说明 | If true, the split pane will be hidden. |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
when
| 说明 | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. |
| 属性 | when |
| 类型 | boolean ｜ string |
| 默认值 | '(min-width: 992px)' |
事件
| Name | 说明 | 冒泡 |
|---|---|---|
ionSplitPaneVisible | Expression to be called when the split-pane visibility has changed | true |
方法
该组件没有可用的公共方法。
CSS Shadow Parts
该组件没有可用的 CSS 阴影部分。
CSS 自定义属性
- iOS
- MD
| Name | 说明 |
|---|---|
--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. |
| Name | 说明 |
|---|---|
--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. |
插槽
该组件没有可用的插槽。