ion-tabs

shadow

Tabs 是实现标签页导航的顶级导航组件。该组件是各个 Tab 组件的容器。

ion-tabs 组件本身没有任何样式，它作为路由出口来处理导航。它不提供任何用户界面反馈或切换标签页的机制。要实现这些功能，需要将 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 组件。

与路由器的配合使用

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

最佳实践

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

接口

TabsCustomEvent

虽然不是必需的，但可以使用此接口替代 CustomEvent 接口，以便对此组件发出的 Ionic 事件进行更严格的类型检查。

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

属性

No properties available for this component.

事件

Name	Description	Bubbles
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

Description	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.
Signature	getSelected() => Promise<string ｜ undefined>

getTab

Description	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.
Signature	getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>
Parameters	tab: The tab instance to select. If passed a string, it should be the value of the tab's tab property.

select

Description	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.
Signature	select(tab: string ｜ HTMLIonTabElement) => Promise<boolean>
Parameters	tab: The tab instance to select. If passed a string, it should be the value of the tab's tab property.

CSS 阴影部件

No CSS shadow parts available for this component.

CSS 自定义属性

No CSS custom properties available for this component.

插槽

Name	Description
``	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.