ion-split-pane
在创建多视图布局时，拆分窗格很有用。它允许UI元素(如菜单)随着视口宽度的增加而显示。
如果设备的屏幕宽度低于一定的尺寸，拆分面板将折叠，菜单将被隐藏。这对于创建一款能够在浏览器中运行并通过应用商店部署到手机和平板电脑上的应用来说是非常理想的。
设置断点
默认情况下，当屏幕大于992px时拆分窗格将展开。控件中传递一个断点
当
财产。的
当
属性可以接受布尔值、任何有效的媒体查询或一个ioion的预定义大小。betway东盟体育app
<！——可以是“xs”、“sm”、“md”、“lg”或“xl”——>
<
ion-split-pane
当
＝
＂
医学博士
＂
>
ion-split-pane
>
<！——可以是任何有效的媒体查询https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries——>
<
ion-split-pane
当
＝
＂
(min-width: 40 px)
＂
>
ion-split-pane
>
复制
复制
| 大小 | 价值 | 描述 |
|---|---|---|
xs |
(min-width: 0 px) |
当最小宽度为0px时显示拆分窗格(意思是总是) |
sm |
(min-width: 576 px) |
当最小宽度为576px时显示拆分窗格 |
医学博士 |
(min-width: 768 px) |
当最小宽度为768px时显示拆分窗格 |
lg |
(min-width: 992 px) |
当最小宽度为992px(默认断点)时显示拆分窗格 |
xl |
(min-width: 1200 px) |
当最小宽度为1200px时显示拆分窗格 |
使用
<
ion-split-pane
contentId
＝
＂
主要
＂
>
<！——配菜——>
<
ion-menu
contentId
＝
＂
主要
＂
>
<
ion-header
>
<
ion-toolbar
>
<
ion-title
>
菜单
ion-title
>
ion-toolbar
>
ion-header
>
ion-menu
>
<！——主要内容——>
<
ion-router-outlet
id
＝
＂
主要
＂
>
ion-router-outlet
>
ion-split-pane
>
复制
复制
<
ion-split-pane
内容识别
＝
＂
主要
＂
>
<！——配菜——>
<
ion-menu
内容识别
＝
＂
主要
＂
>
<
ion-header
>
<
ion-toolbar
>
<
ion-title
>
菜单
ion-title
>
ion-toolbar
>
ion-header
>
ion-menu
>
<！——主要内容——>
<
离子内容
id
＝
＂
主要
＂
>
<
h1
>
你好
h1
>
离子内容
>
ion-split-pane
>
复制
复制
进口
反应
从
“反应”
；
进口
｛
IonSplitPane
，
IonMenu
，
IonHeader
，
IonToolbar
，
IonTitle
，
IonRouterOutlet
，
IonContent
，
IonPage
｝
从
“@betway东盟体育appionic /反应”
；
出口
常量
SplitPlaneExample
：
反应
．
香港证监会
<
｛
｝
>
＝
（
）
＝＞
（
<
IonContent
>
<
IonSplitPane
contentId
＝
＂
主要
＂
>
｛
/*——侧菜单——*/
｝
<
IonMenu
contentId
＝
＂
主要
＂
>
<
IonHeader
>
<
IonToolbar
>
<
IonTitle
>
菜单
IonTitle
>
IonToolbar
>
IonHeader
>
IonMenu
>
｛
/*——主要内容——*/
｝
<
IonPage
id
＝
＂
主要
＂
/>
IonSplitPane
>
IonContent
>
）
；
复制
复制
进口
｛
组件
，
h
｝
从
“@stencil /核心”
；
＠
组件
（
｛
标签
：
“split-pane-example”
，
styleUrl
：
“split-pane-example.css”
｝
）
出口
类
SplitPaneExample
｛
渲染
（
）
｛
返回
［
<
ion-split-pane
内容识别
＝
＂
主要
＂
>
｛
/*侧菜单*/
｝
<
ion-menu
内容识别
＝
＂
主要
＂
>
<
ion-header
>
<
ion-toolbar
>
<
ion-title
>
菜单
ion-title
>
ion-toolbar
>
ion-header
>
ion-menu
>
｛
/*主要内容*/
｝
<
ion-router-outlet
id
＝
＂
主要
＂
>
ion-router-outlet
>
ion-split-pane
>
］
；
｝
｝
复制
复制
<
模板
>
<
ion-split-pane
内容识别
＝
＂
主要
＂
>
<！——配菜——>
<
ion-menu
内容识别
＝
＂
主要
＂
>
<
ion-header
>
<
ion-toolbar
>
<
ion-title
>
菜单
ion-title
>
ion-toolbar
>
ion-header
>
ion-menu
>
<！——主要内容——>
<
ion-router-outlet
id
＝
＂
主要
＂
>
ion-router-outlet
>
ion-split-pane
>
模板
>
<
脚本
>
进口
｛
IonHeader
，
IonMenu
，
IonRouterOutlet
，
IonSplitPane
，
IonTitle
，
IonToolbar
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
｝
从
“vue”
；
出口
默认的
defineComponent
（
｛
组件
：
｛
IonHeader
，
IonMenu
，
IonRouterOutlet
，
IonSplitPane
，
IonTitle
，
IonToolbar
｝
｝
）
；
脚本
>
复制
复制
属性
contentId |
|
|---|---|
| 描述 |
的 |
| 属性 |
内容识别 |
| 类型 |
字符串|未定义 |
禁用 |
|
| 描述 |
如果 |
| 属性 |
禁用 |
| 类型 |
布尔基 |
| 默认的 |
假 |
当 |
|
| 描述 |
何时应该显示拆分窗格。可以是CSS媒体查询表达式，也可以是快捷表达式。也可以是布尔表达式。 |
| 属性 |
当 |
| 类型 |
布尔|字符串 |
| 默认的 |
查询(“lg”) |
事件
| 的名字 | 描述 |
|---|---|
ionSplitPaneVisible |
当拆分窗格可见性更改时要调用的表达式 |
CSS自定义属性
| 的名字 | 描述 |
|---|---|
——边境 |
边境窗格 |
——side-max-width |
侧窗格的最大宽度。拆分窗格折叠时不适用。 |
——side-min-width |
侧窗格的最小宽度。拆分窗格折叠时不适用。 |
——side-width |
侧窗格的宽度。拆分窗格折叠时不适用。 |