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 应用不需要此操作。有关更多信息，请参阅 设置断点。
设置断点
🌐 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.
<ion-split-pane when="md"></ion-split-pane>
<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.