ion-split-pane

shadow

拆分窗格（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/zh-CN/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
默认值	QUERY['lg']

事件

Name	说明	冒泡
ionSplitPaneVisible	Expression to be called when the split-pane visibility has changed	true

方法

该组件没有可用的公共方法。

CSS 阴影部分

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

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.

插槽

该组件没有可用的插槽。