ion-tabs

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;
}

属性

该组件没有可用的属性。

事件

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 Shadow Parts

该组件没有可用的 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.