ion-split-pane
创建多视图布局时，分割窗格非常有用。它允许 UI 元素（如菜单）随着视口宽度的增加而显示。
¥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
此演示将 when 属性设置为 'xs'，以便始终显示分割窗格。如果你希望拆分窗格在较小的视口上折叠，你的 Ionic 应用不需要此操作。请参阅 设置断点 了解更多信息。
¥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
默认情况下，当屏幕大于 992px 时，分割窗格将会展开。要对此进行自定义，请在 when 属性中传递断点。when 属性可以接受布尔值、任何有效的媒体查询或 Ionic 的预定义大小之一。
¥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://web.nodejs.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 时显示分割窗格 |
主题化
¥Theming
CSS 自定义属性
¥CSS Custom Properties
属性
¥Properties
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'] |
事件
¥Events
| Name | Description | Bubbles |
|---|---|---|
ionSplitPaneVisible | Expression to be called when the split-pane visibility has changed | true |
方法
¥Methods
No public methods available for this component.
CSS 阴影部分
¥CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
¥CSS Custom Properties
- iOS
- MD
| 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. |
| 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. |
插槽
¥Slots
No slots available for this component.