选项卡组件

shadow

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

ion-tabs 组件本身没有任何样式，它作为路由出口处理导航。它不提供任何切换标签页的 UI 反馈或机制。为此，需要将 ion-tab-bar 作为 ion-tabs 的直接子组件提供。

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

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

基础用法

标签页可用于显示不同内容而无需更改 URL。这在标签页不用于导航，而仅用于显示不同内容时非常有用。

与路由器配合使用

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

最佳实践

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

以编程方式选择标签页

可以使用 select 方法以编程方式选择标签页。当需要从应用逻辑（例如响应按钮点击或完成表单后）触发标签页切换时，这非常有用。以下示例演示了使用按钮调用 select 方法来导航到不同标签页。

接口

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 Shadow 部件

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.