搜索文档 /
影子

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

描述

id主要内容。当使用路由器时,这是典型的ion-router-outlet.当不使用路由器时,这通常是你的主视图离子内容.这不是本我离子内容在你的ion-menu

属性 内容识别
类型 字符串|未定义

禁用

描述

如果真正的,则拆分窗格将被隐藏。

属性 禁用
类型 布尔基
默认的

描述

何时应该显示拆分窗格。可以是CSS媒体查询表达式,也可以是快捷表达式。也可以是布尔表达式。

属性
类型 布尔|字符串
默认的 查询(“lg”)

事件

的名字 描述
ionSplitPaneVisible 当拆分窗格可见性更改时要调用的表达式

CSS自定义属性

的名字 描述
——边境 边境窗格
——side-max-width 侧窗格的最大宽度。拆分窗格折叠时不适用。
——side-min-width 侧窗格的最小宽度。拆分窗格折叠时不适用。
——side-width 侧窗格的宽度。拆分窗格折叠时不适用。
Baidu