ion-tabs
选项卡是一种顶层导航组件，用于实现基于选项卡的导航。该组件是单个选项卡组件的容器。
🌐 Tabs are a top level navigation component to implement a tab-based navigation. The component is a container of individual Tab components.
ion-tabs 组件没有任何样式，它作为路由出口来处理导航。它不提供任何用户界面反馈或切换选项卡的机制。要实现这一点，应该在 ion-tabs 的直接子组件中提供一个 ion-tab-bar。
🌐 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
标签可以用来显示不同的内容，而无需更改网址。当标签不是用于导航，而是用于显示不同的内容时，这很有用。
🌐 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.
以编程方式选择标签
🌐 Programmatically Selecting Tabs
可以使用 select 方法以编程方式选择选项卡。当需要从应用逻辑触发选项卡更改时，例如响应按钮点击或完成表单后，这非常有用。以下示例演示了如何使用按钮调用 select 方法导 航到不同的选项卡。
🌐 Tabs can be selected programmatically using the select method. This is useful when tab changes need to be triggered from application logic, such as in response to a button click or after completing a form. The following example demonstrates using a button to call the select method to navigate to a different tab.
接口
🌐 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> |
| 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 阴影部分
🌐 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. |