搜索文档 /

ion-tabs

选项卡是一个顶级导航组件,用于实现基于选项卡的导航。组件是个体的容器 选项卡 组件。

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

这两个 ion-tabs 离子标签栏 可以作为独立的元素使用。它们并不依赖于彼此的工作,但它们通常被一起使用,以实现基于选项卡的导航,就像原生应用一样。

离子标签栏 需要一个槽定义,以便被投射到正确的位置 ion-tabs 组件。

使用


                  <
                 ion-tabs
                 >
               
                  <
                 离子标签栏
                
                 狭槽
                  
                  
                 
                  
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 时间表
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 日历
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               时间表
                  
                 ion-label
                 >
               
                  <
                 ion-badge
                 >
               6
                  
                 ion-badge
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 演讲者
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 联系人
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               演讲者
                  
                 ion-label
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 地图
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 地图
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               地图
                  
                 ion-label
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 关于
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 信息圈
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               关于
                  
                 ion-label
                 >
               
                  
                 ion-tab-button
                 >
               
                  
                 离子标签栏
                 >
               
                  
                 ion-tabs
                 >

路由器集成

当与Angular的路由器一起使用时 选项卡 财产 ion-tab-button 应该是路由路径的引用。


                  <
                 ion-tabs
                 >
               
                  <
                 离子标签栏
                
                 狭槽
                  
                  
                 
                  
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 时间表
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 日历
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               时间表
                  
                 ion-label
                 >
               
                  
                 ion-tab-button
                 >
               
                  
                 离子标签栏
                 >
               
                  
                 ion-tabs
                 >

                进口
               
                
               路线
                
               
                
               
                “@angular /路由器”
                
               
                进口
               
                
               TabsPage
                
               
                
               
                ”。/ tabs-page '
                
               
                常量
               路线
                
               路线
                
               
                
               
                
               路径
                
               
                “标签”
                
               组件
                
               TabsPage
                
               孩子们
                
               
                
               
                
               路径
                
               
                “安排”
                
               孩子们
                
               
                
               
                
               路径
                
               
                
                
               loadChildren
                
               
                “. . /计划/ schedule.module # ScheduleModule”
               
                
               
                
               
                
                
               
                
               路径
                
               
                
                
               redirectTo
                
               
                /应用程序/标签/进度的
                
               pathMatch
                
               
                “满”
               
                
               
                
               
                
               
                
                

                  <
                 ion-tabs
                 >
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 tab-schedule
                  
                 >
               
                  <
                 ion-nav
                 >
                  
                 ion-nav
                 >
               
                  
                 ion-tab
                 >
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 tab-speaker
                  
                 >
               
                  <
                 ion-nav
                 >
                  
                 ion-nav
                 >
               
                  
                 ion-tab
                 >
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 tab-map
                  
                
                 组件
                  
                  
                 page-map
                  
                 >
               
                  <
                 ion-nav
                 >
                  
                 ion-nav
                 >
               
                  
                 ion-tab
                 >
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 tab-about
                  
                
                 组件
                  
                  
                 页面
                  
                 >
               
                  <
                 ion-nav
                 >
                  
                 ion-nav
                 >
               
                  
                 ion-tab
                 >
               
                  <
                 离子标签栏
                
                 狭槽
                  
                  
                 
                  
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 tab-schedule
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 日历
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               时间表
                  
                 ion-label
                 >
               
                  <
                 ion-badge
                 >
               6
                  
                 ion-badge
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 tab-speaker
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 联系人
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               演讲者
                  
                 ion-label
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 tab-map
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 地图
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               地图
                  
                 ion-label
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 tab-about
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 信息圈
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               关于
                  
                 ion-label
                 >
               
                  
                 ion-tab-button
                 >
               
                  
                 离子标签栏
                 >
               
                  
                 ion-tabs
                 >

激活标签

每一个 ion-tab-button 将激活其中一个标签时,按下。为了连接 ion-tab-button ion-tab 容器,一个匹配的 选项卡 属性应该在每个组件上设置。


                  <
                 ion-tab
                
                 选项卡
                  
                  
                 设置
                  
                 >
               ...
                  
                 ion-tab
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 设置
                  
                 >
               ...
                  
                 ion-tab-button
                 >

ion-tab-button ion-tab 以上是链接的共性 选项卡 财产。

选项卡 属性标识每个选项卡,并且它必须在 ion-tabs .重要的是要始终设置 选项卡 财产的 ion-tab ion-tab-button ,即使一个组件没有被使用。

路由器集成

当与爱奥尼亚的路由器(betway东盟体育app ion-router ) 选项卡 财产 ion-tab 匹配 组件 财产的 ion-route

下面的路由在一个 ion-tabs 出口:


                  <
                 ion-route
                
                 url
                  
                  
                 /设置页面
                  
                
                 组件
                  
                  
                 设置
                  
                 >
                  
                 ion-route
                 >

将匹配以下选项卡:


                  <
                 ion-tab
                
                 选项卡
                  
                  
                 设置
                  
                
                 组件
                  
                  
                 settings-component
                  
                 >
                  
                 ion-tab
                 >

                进口
               反应
                
               
                “反应”
                
               
                进口
               
                
               IonTabs
                
               IonTabBar
                
               IonTabButton
                
               betway东盟体育appIonIcon
                
               IonLabel
                
               IonBadge
                
               
                
               
                “@betway东盟体育appionic /反应”
                
               
                出口
               
                常量
               TabsExample
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                =>
               
                
               
                  <
                  IonTabs
                 >
                
                  <
                  IonTabBar
                
                 狭槽
                  
                  
                 
                  
                 >
                
                  <
                  IonTabButton
                
                 选项卡
                  
                  
                 时间表
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 的名字
                  
                  
                 日历
                  
                
                 />
                
                  <
                  IonLabel
                 >
                时间表
                  
                  IonLabel
                 >
                
                  <
                  IonBadge
                 >
                6
                  
                  IonBadge
                 >
                
                  
                  IonTabButton
                 >
                
                  <
                  IonTabButton
                
                 选项卡
                  
                  
                 演讲者
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 的名字
                  
                  
                 联系人
                  
                
                 />
                
                  <
                  IonLabel
                 >
                演讲者
                  
                  IonLabel
                 >
                
                  
                  IonTabButton
                 >
                
                  <
                  IonTabButton
                
                 选项卡
                  
                  
                 地图
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 的名字
                  
                  
                 地图
                  
                
                 />
                
                  <
                  IonLabel
                 >
                地图
                  
                  IonLabel
                 >
                
                  
                  IonTabButton
                 >
                
                  <
                  IonTabButton
                
                 选项卡
                  
                  
                 关于
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 的名字
                  
                  
                 信息圈
                  
                
                 />
                
                  <
                  IonLabel
                 >
                关于
                  
                  IonLabel
                 >
                
                  
                  IonTabButton
                 >
                
                  
                  IonTabBar
                 >
                
                  
                  IonTabs
                 >
               
                
                

                  <
                 模板
                 >
               
                <!——听标签更改事件的前后——>
               
                  <
                 ion-tabs
                
                 @IonTabsWillChange
                  
                  
                 beforeTabChange
                  
                
                 @IonTabsDidChange
                  
                  
                 afterTabChange
                  
                 >
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 时间表
                  
                 >
               
                  <
                 时间表
                
                 />
               
                  
                 ion-tab
                 >
               
                
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 演讲者
                  
                
                 :路线
                  
                  
                  
                 app.speakers”
                  
                 >
               
                  <
                 演讲者
                
                 />
               
                  
                 ion-tab
                 >
               
                <!——通过路由名称数组进行匹配——>
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 地图
                  
                
                 :路线
                  
                  
                 ['app.map','app.other.route']
                  
                 >
               
                  <
                 地图
                
                 />
               
                  
                 ion-tab
                 >
               
                <!——使用helper方法获取匹配的路由——>
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 关于
                  
                
                 :路线
                  
                  
                 getMatchedRoutes
                  
                 >
               
                  <
                 关于
                
                 />
               
                  
                 ion-tab
                 >
               
                <!——使用v-slot:bottom Vue ^2.6.0——>
               
                  <
                 模板
                
                 狭槽
                  
                  
                 
                  
                 >
               
                  <
                 离子标签栏
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 时间表
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 日历
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               时间表
                  
                 ion-label
                 >
               
                  <
                 ion-badge
                 >
               6
                  
                 ion-badge
                 >
               
                  
                 ion-tab-button
                 >
               
                <!——提供自定义路由导航到——>
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 演讲者
                  
                
                 :
                  
                  
                 {name: 'app.speakers'}
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 联系人
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               演讲者
                  
                 ion-label
                 >
               
                  
                 ion-tab-button
                 >
               
                <!——提供额外的数据路由——>
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 地图
                  
                
                 :
                  
                  
                 {name: 'app.map', params: {mode: 'dark'}}
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 地图
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               地图
                  
                 ion-label
                 >
               
                  
                 ion-tab-button
                 >
               
                <!——提供自定义点击处理程序——>
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 关于
                  
                
                 @click
                  
                  
                 goToAboutTab
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 信息圈
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               关于
                  
                 ion-label
                 >
               
                  
                 ion-tab-button
                 >
               
                  
                 离子标签栏
                 >
               
                  
                 模板
                 >
               
                  
                 ion-tabs
                 >
               
                  
                 模板
                 >

事件

的名字 描述
ionTabsDidChange 当导航完成到新组件的转换时触发。
ionTabsWillChange 当导航即将转换到新组件时触发。

方法

getSelected

描述

获取当前选定的选项卡。

签名 getSelected() => Promise

盖塔布

描述

获取一个特定的选项卡的值选项卡属性或元素引用。

签名 getab (tab: string | HTMLIonTabElement) => Promise . getab (tab: string | HTMLIonTabElement) => Promise

选择

描述

根据选项卡的值选择选项卡选项卡属性或元素引用。

签名 select(tab: string | HTMLIonTabElement) => Promise . txt

的名字 描述
如果没有提供插槽,则将内容放置在指定的插槽之间。
“底” 内容放在屏幕的底部。
“顶级” 内容被放置在屏幕的顶部。
查看源代码
Baidu