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 |
选择 |
|
| 描述 |
根据选项卡的值选择选项卡 |
| 签名 |
select(tab: string | HTMLIonTabElement) => Promise |
槽
| 的名字 | 描述 |
|---|---|
| 如果没有提供插槽，则将内容放置在指定的插槽之间。 | |
“底” |
内容放在屏幕的底部。 |
“顶级” |
内容被放置在屏幕的顶部。 |