ion-split-pane

阴影

分割面板在创建多视图布局时非常有用。它允许 UI 元素（如菜单）在视窗宽度增加时显示。

如果设备的屏幕宽度小于某个大小，则分割面板将折叠，并且菜单将被隐藏。这非常适合创建将在浏览器中提供服务并通过应用程序商店部署到手机和平板电脑的应用程序。

基本用法

注意

此演示将 `when` 属性设置为 `'xs'`，以便分割面板始终显示。如果您希望分割面板在较小的视窗上折叠，则您的 Ionic 应用程序不需要此设置。有关更多信息，请参见 设置断点。

设置断点

默认情况下，分割面板在屏幕尺寸大于 992px 时将展开。要自定义此设置，请在 `when` 属性中传递一个断点。`when` 属性可以接受布尔值、任何有效的媒体查询或 Ionic 的预定义尺寸之一。

<!-- can be "xs", "sm", "md", "lg", or "xl" -->
<ion-split-pane when="md"></ion-split-pane>

<!-- can be any valid media query https://mdn.org.cn/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

描述	主要内容的 `id`。使用路由器时，这通常是 `ion-router-outlet`。不使用路由器时，这通常是主视图的 `ion-content`。这不是 `ion-menu` 中的 `ion-content` 的 id。
属性	content-id
类型	string ｜ undefined
默认	undefined

disabled

描述	如果为 `true`，则分割面板将被隐藏。
属性	disabled
类型	boolean
默认	false

when

描述	何时应显示分割面板。可以是 CSS 媒体查询表达式，也可以是快捷表达式。也可以是布尔表达式。
属性	when
类型	boolean ｜ string
默认	QUERY['lg']

事件

名称	描述	冒泡
ionSplitPaneVisible	当分割面板可见性发生变化时要调用的表达式	true

方法

此组件没有公开方法。

CSS 阴影部分

此组件没有 CSS 阴影部分。

CSS 自定义属性

iOS

名称	描述
--border	面板之间的边框
--side-max-width	侧面板的最大宽度。在分割面板折叠时不适用。
--side-min-width	侧面板的最小宽度。在分割面板折叠时不适用。
--side-width	侧面板的宽度。在分割面板折叠时不适用。

MD

名称	描述
--border	面板之间的边框
--side-max-width	侧面板的最大宽度。在分割面板折叠时不适用。
--side-min-width	侧面板的最小宽度。在分割面板折叠时不适用。
--side-width	侧面板的宽度。在分割面板折叠时不适用。

插槽

此组件没有插槽。