ion-tabs

阴影

选项卡是顶级导航组件，用于实现基于选项卡的导航。该组件是各个 选项卡 组件的容器。

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 的指南以获取更多信息。

接口

TabsCustomEvent

虽然不是必需的，但此接口可以代替 CustomEvent 接口，为从该组件发出的 Ionic 事件提供更强的类型化。

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

属性

此组件没有可用的属性。

事件

名称	描述	冒泡
ionTabsDidChange	导航完成向新组件过渡时发出。	false
ionTabsWillChange	导航即将向新组件过渡时发出。	false

方法

getSelected

描述	获取当前选定的选项卡。此方法仅适用于普通 JavaScript 项目。Angular、React 和 Vue 的选项卡实现与每个框架的路由器耦合。
签名	getSelected() => Promise<string ｜ undefined>

getTab

描述	通过其 tab 属性的值或元素引用获取特定选项卡。此方法仅适用于普通 JavaScript 项目。Angular、React 和 Vue 的选项卡实现与每个框架的路由器耦合。
签名	getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>

选择

描述	通过其 tab 属性的值或元素引用选择选项卡。此方法仅适用于普通 JavaScript 项目。Angular、React 和 Vue 的选项卡实现与每个框架的路由器耦合。
签名	select(tab: string ｜ HTMLIonTabElement) => Promise<boolean>

CSS 阴影部分

此组件没有可用的 CSS 阴影部分。

CSS 自定义属性

此组件没有可用的 CSS 自定义属性。

插槽

名称	描述
``	如果提供内容，则内容将放置在命名的插槽之间，没有插槽。
底部	内容放置在屏幕底部。
顶部	内容放置在屏幕顶部。