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.

框架支持

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

¥Using ion-tabs within Angular, React or Vue requires the use of the ion-router-outlet or ion-nav components.

与路由一起使用

¥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.

与路由一起使用​

接口​

TabsCustomEvent​

属性​

事件​

方法​

getSelected​

getTab​

select​

CSS 阴影部分​

CSS 自定义属性​

插槽​

目录