搜索文件 /
阴影

ion-tabs

选项卡是一个顶级导航组件,以实现基于标签的导航。该组件是个人的容器<模版-route-link class="hydrated" c-id="146.13.5.1" s-id="153"> 标签 成分。

ion-tabs 组件没有任何样式,并用作路由器插座以处理导航。它不提供在选项卡之间切换的任何UI反馈或机制。为了这样做,一个 离子标签杆 应该作为一个直接的孩子提供 ion-tabs

这两个 ion-tabs 离子标签杆 可以用作独立元素。它们并不依赖于彼此工作,但通常使用它们以实现基于标签的导航,该导航表现类似于本机应用程序。

离子标签杆 需要定义的插槽,以便将其投射到正确的位置 ion-tabs 组件。

用法


                  <
                 ion-tabs
                 >
               
                  <
                 离子标签杆
                
                 投币口
                  =
                  
                 
                  
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 日程
                  
                 >
               
                  <
                 离子图标
                
                 姓名
                  =
                  
                 日历
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               日程
                  
                 离子标签
                 >
               
                  <
                 离子徽章
                 >
               6.
                  
                 离子徽章
                 >
               
                  
                 离子标签按钮
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 扬声器
                  
                 >
               
                  <
                 离子图标
                
                 姓名
                  =
                  
                 人圈
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               扬声器
                  
                 离子标签
                 >
               
                  
                 离子标签按钮
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 地图
                  
                 >
               
                  <
                 离子图标
                
                 姓名
                  =
                  
                 地图
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               地图
                  
                 离子标签
                 >
               
                  
                 离子标签按钮
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 关于
                  
                 >
               
                  <
                 离子图标
                
                 姓名
                  =
                  
                 信息圈
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               关于
                  
                 离子标签
                 >
               
                  
                 离子标签按钮
                 >
               
                  
                 离子标签杆
                 >
               
                  
                 ion-tabs
                 >
复制 复制

路由器集成

与角度的路由器一起使用时 选项卡 财产的 离子标签按钮 应该是对路径路径的引用。


                  <
                 ion-tabs
                 >
               
                  <
                 离子标签杆
                
                 投币口
                  =
                  
                 
                  
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 日程
                  
                 >
               
                  <
                 离子图标
                
                 姓名
                  =
                  
                 日历
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               日程
                  
                 离子标签
                 >
               
                  
                 离子标签按钮
                 >
               
                  
                 离子标签杆
                 >
               
                  
                 ion-tabs
                 >
复制 复制

                进口
               
                {
               路线
                }
               
                
               
                '@ Angular / Router'
                ;
               
                进口
               
                {
               禁忌
                }
               
                
               
                './tabs-page'
                ;
               
                Const.
               路线
                
               路线
                =
               
                [
               
                {
               小路
                
               
                '标签'
                
               成分
                
               禁忌
                
               孩子们
                
               
                [
               
                {
               小路
                
               
                '日程'
                
               孩子们
                
               
                [
               
                {
               小路
                
               
                ''
                
               loadchildren.
                
               
                '../schedule/schedule.module#schedulemodule'
               
                }
               
                ]
               
                }
                
               
                {
               小路
                
               
                ''
                
               redirectto.
                
               
                '/ app / tabs / schords'
                
               路径
                
               
                “全部”
               
                }
               
                ]
               
                }
               
                ]
                ;
复制 复制

                  <
                 ion-tabs
                 >
               
                  <
                 离子标签
                
                 选项卡
                  =
                  
                 标签时间表
                  
                 >
               
                  <
                 离子导航
                 >
                  
                 离子导航
                 >
               
                  
                 离子标签
                 >
               
                  <
                 离子标签
                
                 选项卡
                  =
                  
                 扬声器
                  
                 >
               
                  <
                 离子导航
                 >
                  
                 离子导航
                 >
               
                  
                 离子标签
                 >
               
                  <
                 离子标签
                
                 选项卡
                  =
                  
                 标签映射
                  
                
                 成分
                  =
                  
                 页面地图
                  
                 >
               
                  <
                 离子导航
                 >
                  
                 离子导航
                 >
               
                  
                 离子标签
                 >
               
                  <
                 离子标签
                
                 选项卡
                  =
                  
                 标签 - 关于
                  
                
                 成分
                  =
                  
                 页面
                  
                 >
               
                  <
                 离子导航
                 >
                  
                 离子导航
                 >
               
                  
                 离子标签
                 >
               
                  <
                 离子标签杆
                
                 投币口
                  =
                  
                 
                  
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 标签时间表
                  
                 >
               
                  <
                 离子图标
                
                 姓名
                  =
                  
                 日历
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               日程
                  
                 离子标签
                 >
               
                  <
                 离子徽章
                 >
               6.
                  
                 离子徽章
                 >
               
                  
                 离子标签按钮
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 扬声器
                  
                 >
               
                  <
                 离子图标
                
                 姓名
                  =
                  
                 人圈
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               扬声器
                  
                 离子标签
                 >
               
                  
                 离子标签按钮
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 标签映射
                  
                 >
               
                  <
                 离子图标
                
                 姓名
                  =
                  
                 地图
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               地图
                  
                 离子标签
                 >
               
                  
                 离子标签按钮
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 标签 - 关于
                  
                 >
               
                  <
                 离子图标
                
                 姓名
                  =
                  
                 信息圈
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               关于
                  
                 离子标签
                 >
               
                  
                 离子标签按钮
                 >
               
                  
                 离子标签杆
                 >
               
                  
                 ion-tabs
                 >
复制 复制

激活标签

每个 离子标签按钮 按下时将激活其中一个选项卡。为了链接 离子标签按钮 到了 离子标签 容器,匹配 选项卡 应在每个组件上设置属性。


                  <
                 离子标签
                
                 选项卡
                  =
                  
                 设置
                  
                 >
               ......
                  
                 离子标签
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 设置
                  
                 >
               ......
                  
                 离子标签按钮
                 >
复制 复制

离子标签按钮 离子标签 以上与常见相关联 选项卡 财产。

选项卡 属性标识每个选项卡,并且它在 ion-tabs 。始终设置的很重要 选项卡 财产的 离子标签 离子标签按钮 ,即使不使用一个组件。

路由器集成

与离子的路由器一起使用时(betway东盟体育app 离子路由器 ) 这 选项卡 财产的 离子标签 匹配 成分 财产的财产 离子路线

在一个范围内的以下路线 ion-tabs 出口:


                  <
                 离子路线
                
                 URL.
                  =
                  
                 /设置 - 页面
                  
                
                 成分
                  =
                  
                 设置
                  
                 >
                  
                 离子路线
                 >
复制 复制

将匹配以下选项卡:


                  <
                 离子标签
                
                 选项卡
                  =
                  
                 设置
                  
                
                 成分
                  =
                  
                 设置 - 组件
                  
                 >
                  
                 离子标签
                 >
复制 复制

                进口
               反应
                
               
                '反应'
                ;
               
                进口
               
                {
               iontabs.
                
               IonTabBar
                
               iontabbutton.
                
               betway东盟体育app离子
                
               Ionlabel.
                
               IonBadge.
                }
               
                
               
                '@betway东盟体育app离子/反应'
                ;
               
                进口
               
                {
               日历
                
               人格循环
                
               地图
                
               信息循环
                }
               
                
               
                “betway东盟体育appionicons /图标”
                ;
               
                出口
               
                Const.
               tabsexample.
                
               反应
                
                FC.
               
                =
               
                
                的)
               
                =>
               
                
               
                  <
                  iontabs.
                 >
                
                  <
                  IonTabBar
                
                 投币口
                  =
                  
                 
                  
                 >
                
                  <
                  iontabbutton.
                
                 选项卡
                  =
                  
                 日程
                  
                 >
                
                  <
                  betway东盟体育app离子
                
                 图标
                  =
                  {
                 日历
                  }
                
                 />
                
                  <
                  Ionlabel.
                 >
                日程
                  
                  Ionlabel.
                 >
                
                  <
                  IonBadge.
                 >
                6.
                  
                  IonBadge.
                 >
                
                  
                  iontabbutton.
                 >
                
                  <
                  iontabbutton.
                
                 选项卡
                  =
                  
                 扬声器
                  
                 >
                
                  <
                  betway东盟体育app离子
                
                 图标
                  =
                  {
                 人格循环
                  }
                
                 />
                
                  <
                  Ionlabel.
                 >
                扬声器
                  
                  Ionlabel.
                 >
                
                  
                  iontabbutton.
                 >
                
                  <
                  iontabbutton.
                
                 选项卡
                  =
                  
                 地图
                  
                 >
                
                  <
                  betway东盟体育app离子
                
                 图标
                  =
                  {
                 地图
                  }
                
                 />
                
                  <
                  Ionlabel.
                 >
                地图
                  
                  Ionlabel.
                 >
                
                  
                  iontabbutton.
                 >
                
                  <
                  iontabbutton.
                
                 选项卡
                  =
                  
                 关于
                  
                 >
                
                  <
                  betway东盟体育app离子
                
                 图标
                  =
                  {
                 信息循环
                  }
                
                 />
                
                  <
                  Ionlabel.
                 >
                关于
                  
                  Ionlabel.
                 >
                
                  
                  iontabbutton.
                 >
                
                  
                  IonTabBar
                 >
                
                  
                  iontabs.
                 >
               
                的)
                ;
复制 复制

                进口
               
                {
               成分
                
               H
                }
               
                
               
                '@模板/核心'
                ;
               @
                成分
                
                {
               标签
                
               
                “标签 - 示例”
                
               styleurl.
                
               
                'tabs-example.css'
               
                }
                的)
               
                出口
               
                班级
               
                tabsexample.
               
                {
               
                使成为
                
                的)
               
                {
               
                返回
               
                [
               
                  <
                 ion-tabs
                 >
                
                  <
                 离子标签
                
                 选项卡
                  =
                  
                 标签时间表
                  
                 >
                
                  <
                 离子导航
                 >
                  
                 离子导航
                 >
                
                  
                 离子标签
                 >
                
                  <
                 离子标签
                
                 选项卡
                  =
                  
                 扬声器
                  
                 >
                
                  <
                 离子导航
                 >
                  
                 离子导航
                 >
                
                  
                 离子标签
                 >
                
                  <
                 离子标签
                
                 选项卡
                  =
                  
                 标签映射
                  
                
                 成分
                  =
                  
                 页面地图
                  
                 >
                
                  <
                 离子导航
                 >
                  
                 离子导航
                 >
                
                  
                 离子标签
                 >
                
                  <
                 离子标签
                
                 选项卡
                  =
                  
                 标签 - 关于
                  
                
                 成分
                  =
                  
                 页面
                  
                 >
                
                  <
                 离子导航
                 >
                  
                 离子导航
                 >
                
                  
                 离子标签
                 >
                
                  <
                 离子标签杆
                
                 投币口
                  =
                  
                 
                  
                 >
                
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 标签时间表
                  
                 >
                
                  <
                 离子图标
                
                 姓名
                  =
                  
                 日历
                  
                 >
                  
                 离子图标
                 >
                
                  <
                 离子标签
                 >
                日程
                  
                 离子标签
                 >
                
                  <
                 离子徽章
                 >
                6.
                  
                 离子徽章
                 >
                
                  
                 离子标签按钮
                 >
                
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 扬声器
                  
                 >
                
                  <
                 离子图标
                
                 姓名
                  =
                  
                 人圈
                  
                 >
                  
                 离子图标
                 >
                
                  <
                 离子标签
                 >
                扬声器
                  
                 离子标签
                 >
                
                  
                 离子标签按钮
                 >
                
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 标签映射
                  
                 >
                
                  <
                 离子图标
                
                 姓名
                  =
                  
                 地图
                  
                 >
                  
                 离子图标
                 >
                
                  <
                 离子标签
                 >
                地图
                  
                 离子标签
                 >
                
                  
                 离子标签按钮
                 >
                
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 标签 - 关于
                  
                 >
                
                  <
                 离子图标
                
                 姓名
                  =
                  
                 信息圈
                  
                 >
                  
                 离子图标
                 >
                
                  <
                 离子标签
                 >
                关于
                  
                 离子标签
                 >
                
                  
                 离子标签按钮
                 >
                
                  
                 离子标签杆
                 >
                
                  
                 ion-tabs
                 >
               
                ]
                ;
               
                }
               
                }
复制 复制

激活标签

每个 离子标签按钮 按下时将激活其中一个选项卡。为了链接 离子标签按钮 到了 离子标签 容器,匹配 选项卡 应在每个组件上设置属性。


                  <
                 离子标签
                
                 选项卡
                  =
                  
                 设置
                  
                 >
                ......
                  
                 离子标签
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 设置
                  
                 >
                ......
                  
                 离子标签按钮
                 >
复制 复制

离子标签按钮 离子标签 以上与常见相关联 选项卡 财产。

选项卡 属性标识每个选项卡,并且它在 ion-tabs 。始终设置的很重要 选项卡 财产的 离子标签 离子标签按钮 ,即使不使用一个组件。

路由器集成

与离子的路由器一起使用时(betway东盟体育app 离子路由器 ) 这 选项卡 财产的 离子标签 匹配 成分 财产的财产 离子路线

在一个范围内的以下路线 ion-tabs 出口:


                  <
                 离子路线
                
                 URL.
                  =
                  
                 /设置 - 页面
                  
                
                 成分
                  =
                  
                 设置
                  
                 >
                  
                 离子路线
                 >
复制 复制

将匹配以下选项卡:


                  <
                 离子标签
                
                 选项卡
                  =
                  
                 设置
                  
                
                 成分
                  =
                  
                 设置 - 组件
                  
                 >
                  
                 离子标签
                 >
复制 复制

Tabs.vue.


                  <
                 模板
                 >
               
                  <
                 离子页面
                 >
               
                  <
                 ion-tabs
                
                 @iontabswillchange.
                  =
                  
                 BeforeTabchange.
                  
                
                 @iontabsdidchange.
                  =
                  
                 andertabchange.
                  
                 >
               
                  <
                 离子标签杆
                
                 投币口
                  =
                  
                 
                  
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 日程
                  
                
                 HREF.
                  =
                  
                 /标签/计划
                  
                 >
               
                  <
                 离子图标
                
                 :图标
                  =
                  
                 日历
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               日程
                  
                 离子标签
                 >
               
                  <
                 离子徽章
                 >
               6.
                  
                 离子徽章
                 >
               
                  
                 离子标签按钮
                 >
               
                  <
                 离子标签按钮
                
                 选项卡
                  =
                  
                 扬声器
                  
                
                 HREF.
                  =
                  
                 /标签/扬声器
                  
                 >
               
                  <
                 离子图标
                
                 :图标
                  =
                  
                 人格循环
                  
                 >
                  
                 离子图标
                 >
               
                  <
                 离子标签
                 >
               扬声器
                  
                 离子标签
                 >
               
                  
                 离子标签按钮
                 >
               
                  
                 离子标签杆
                 >
               
                  
                 ion-tabs
                 >
               
                  
                 离子页面
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  {
                 绝缘组分
                  }
                 
                  
                 
                  'vue'
                  ;
                 
                  进口
                 
                  {
                 betway东盟体育app离子
                  
                 Ionlabel.
                  
                 IonPage
                  
                 IonTabBar
                  
                 iontabbutton.
                  
                 iontabs.
                  }
                 
                  
                 
                  '@betway东盟体育app ionic / vue'
                  ;
                 
                  进口
                 
                  {
                 日历
                  
                 人格循环
                  }
                 
                  
                 
                  “betway东盟体育appionicons /图标”
                  ;
                 
                  出口
                 
                  默认
                 
                  绝缘组分
                  
                  {
                 成分
                  
                 
                  {
                 betway东盟体育app离子
                  
                 Ionlabel.
                  
                 IonPage
                  
                 IonTabBar
                  
                 iontabbutton.
                  
                 iontabs.
                  }
                  
                 
                  设置
                  
                  的)
                 
                  {
                 
                  Const.
                 
                  BeforeTabchange.
                 
                  =
                 
                  
                  的)
                 
                  =>
                 
                  {
                 
                  //在制表符之前执行某些内容
                 
                  }
                 
                  Const.
                 
                  andertabchange.
                 
                  =
                 
                  
                  的)
                 
                  =>
                 
                  {
                 
                  //制表夹更改后做某事
                 
                  }
                 
                  返回
                 
                  {
                 日历
                  
                 人格循环
                  
                 BeforeTabchange.
                  
                 andertabchange.
                  }
                 
                  }
                 
                  }
                  的)
                  ;
                 
                  
                 脚本
                 >
复制 复制

sching.vue.


                  <
                 模板
                 >
               
                  <
                 离子页面
                 >
               
                  <
                 离子标题
                 >
               
                  <
                 离子工具栏
                 >
               
                  <
                 离子标题
                 >
               日程
                  
                 离子标题
                 >
               
                  
                 离子工具栏
                 >
               
                  
                 离子标题
                 >
               
                  <
                 离子内容
                
                 班级
                  =
                  
                 离子填充
                  
                 >
               安排选项卡
                  
                 离子内容
                 >
               
                  
                 离子页面
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  {
                 绝缘组分
                  }
                 
                  
                 
                  'vue'
                  ;
                 
                  进口
                 
                  {
                 离子联系
                  
                 离子主艇
                  
                 IonPage
                  
                 Iontitle.
                  
                 Iontoolbar.
                  }
                 
                  
                 
                  '@betway东盟体育app ionic / vue'
                  ;
                 
                  出口
                 
                  默认
                 
                  绝缘组分
                  
                  {
                 成分
                  
                 
                  {
                 离子联系
                  
                 离子主艇
                  
                 IonPage
                  
                 Iontitle.
                  
                 Iontoolbar.
                  }
                 
                  }
                  的)
                  ;
                 
                  
                 脚本
                 >
复制 复制

扬声器


                  <
                 模板
                 >
               
                  <
                 离子页面
                 >
               
                  <
                 离子标题
                 >
               
                  <
                 离子工具栏
                 >
               
                  <
                 离子标题
                 >
               扬声器
                  
                 离子标题
                 >
               
                  
                 离子工具栏
                 >
               
                  
                 离子标题
                 >
               
                  <
                 离子内容
                
                 班级
                  =
                  
                 离子填充
                  
                 >
               扬声器标签
                  
                 离子内容
                 >
               
                  
                 离子页面
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  {
                 绝缘组分
                  }
                 
                  
                 
                  'vue'
                  ;
                 
                  进口
                 
                  {
                 离子联系
                  
                 离子主艇
                  
                 IonPage
                  
                 Iontitle.
                  
                 Iontoolbar.
                  }
                 
                  
                 
                  '@betway东盟体育app ionic / vue'
                  ;
                 
                  出口
                 
                  默认
                 
                  绝缘组分
                  
                  {
                 成分
                  
                 
                  {
                 离子联系
                  
                 离子主艇
                  
                 IonPage
                  
                 Iontitle.
                  
                 Iontoolbar.
                  }
                 
                  }
                  的)
                  ;
                 
                  
                 脚本
                 >
复制 复制

事件

姓名 描述
iontabsdidchange. 当导航完成转换到新组件时发出。
iontabswillchange. 当导航即将到达新组件时发出。

方法

入选

描述

获取当前选定的选项卡。

签名 getSelected() => Promise

Gettab.

描述

通过其值获取特定选项卡选项卡属性或元素引用。

签名 GetTab(选项卡:String | HtmlionTabelement)=> Promise

选择

描述

选择标签为其值选项卡属性或元素引用。

签名 选择(选项卡:String | htmliontabelement)=> promise

姓名 描述
如果没有提供槽,则将内容放在指定槽之间。
“底部” 内容放置在屏幕的底部。
“最佳” 内容放置在屏幕的顶部。
查看来源
Baidu