ion-tabs

shadow

选项卡是实现基于选项卡的导航的顶层导航组件。该组件是各个 标签 组件的容器。

¥Tabs are a top level navigation component to implement a tab-based navigation. The component is a container of individual Tab components.

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

¥The ion-tabs component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an ion-tab-bar should be provided as a direct child of ion-tabs.

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

¥Both ion-tabs and ion-tab-bar can be used as standalone elements. They don’t depend on each other to work, but they are usually used together in order to implement a tab-based navigation that behaves like a native app.

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

¥The ion-tab-bar needs a slot defined in order to be projected to the right place in an ion-tabs component.

基本用法

¥Basic Usage

选项卡可用于显示不同的内容，而无需更改 URL。当选项卡不用于导航而是用于显示不同内容时，这很有用。

¥Tabs can be used to display different content without the need to change the URL. This is useful when the tabs are not used for navigation, but rather to display different content.

与路由一起使用

¥Usage with Router

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

¥Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the URL. This is the most common pattern for tabs navigation.

最佳实践

Ionic 有关于带有选项卡的路由模式的最佳实践指南。查看 Angular、React 和 Vue 的指南以获取更多信息。

¥Ionic has guides on best practices for routing patterns with tabs. Check out the guides for Angular, React, and Vue for additional information.

接口

¥Interfaces

TabsCustomEvent

虽然不是必需的，但可以使用此接口代替 CustomEvent 接口，以便使用从此组件发出的 Ionic 事件进行更强的键入。

¥While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

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

属性

¥Properties

No properties available for this component.

事件

¥Events

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

方法

¥Methods

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>

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>

CSS 阴影部分

¥CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

¥CSS Custom Properties

No CSS custom properties available for this component.

插槽

¥Slots

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.