ion-tabs

shadow

标签页（Tabs）是用于实现基于标签的导航的顶层导航组件。该组件是各个标签（Tab）组件的容器。

ion-tabs 组件没有任何样式，作为路由出口来处理导航。它不提供任何 UI 反馈或在标签之间切换的机制。为此，应将 ion-tab-bar 作为 ion-tabs 的直接子元素提供。

ion-tabs 和 ion-tab-bar 都可以作为独立元素使用。它们不相互依赖才能工作，但通常一起使用以实现行为类似原生应用的基于标签的导航。

ion-tab-bar 需要定义一个插槽，以便投影到 ion-tabs 组件的正确位置。

框架支持

在 Angular、React 或 Vue 中使用 ion-tabs 需要使用 ion-router-outlet 或 ion-nav 组件。

与路由器一起使用

标签页可以与 Ionic 路由器一起使用来实现基于标签的导航。标签栏和活动标签将根据 URL 自动解析。这是最常用的标签导航模式。

最佳实践

Ionic 提供了关于标签路由模式最佳实践的指南。请查看 Angular、React 和 Vue 的指南以获取更多信息。

接口

TabsCustomEvent

虽然不是必需的，但此接口可以替代 CustomEvent 接口，为此组件发出的 Ionic 事件提供更强的类型支持。

interface TabsCustomEvent extends CustomEvent {
  detail: { tab: string };
  target: HTMLIonTabsElement;
}

属性

该组件没有可用的属性。

事件

Name	说明	冒泡
ionTabsDidChange	Emitted when the navigation has finished transitioning to a new component.	false
ionTabsWillChange	Emitted when the navigation is about to transition to a new component.	false

方法

getSelected

说明	Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
签名	getSelected() => Promise<string ｜ undefined>

getTab

说明	Get a specific tab by the value of its tab property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
签名	getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>
参数	tab: The tab instance to select. If passed a string, it should be the value of the tab's tab property.

select

说明	Select a tab by the value of its tab property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
签名	select(tab: string ｜ HTMLIonTabElement) => Promise<boolean>
参数	tab: The tab instance to select. If passed a string, it should be the value of the tab's tab property.

CSS 阴影部分

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

该组件没有可用的 CSS 自定义属性。

插槽

Name	说明
	Content is placed between the named slots if provided without a slot.
bottom	Content is placed at the bottom of the screen.
top	Content is placed at the top of the screen.