电容标签栏插件

显示原生插件 选项卡栏 iOS上有"液态玻璃".

特征

• 🫧 液体玻璃:将iOS 26上的原生液体玻璃标签栏和更早版本的经典标签栏进行渲染.
• 🧭 标签: 使用您的资产目录中的 SF 符号或图像作为图标并显示徽章 .
• 🎨 颜色: 自定义所选和未选标签的颜色.
• 📐 安全区: 扩展网页视图的下层安全区域,所以您的内容从未被标签栏所覆盖.
• 🚀 发射配置: 显示启动时的标签栏, 不等待您的网络应用程序 .
• 📦 可可花和SPM:支持CocoaPods和Swift软件包管理器用于iOS.
• 🔁 最新数据:总是支持最新的Capacitor版本.

缺少一个功能? 刚刚 打开一个问题 我们看看!

兼容性

安装

你可以用我们的 AI 辅助设置 以安装插件. 添加数据 超级技能 至您的 AI 工具,使用以下命令:

npx skills add capawesome-team/skills --skill capacitor-plugins

然后使用下列提示:

 Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-tab-bar` plugin in my project.

如果你喜欢 手动设置,通过运行以下命令来安装插件,并遵循下面的平台特定指令:

npm install @capawesome/capacitor-tab-bar
npx cap sync

此插件仅可用于 iOS系统。在Android和Web上,所有方法都否认未执行.

iOS系统

标签栏被放置在网页视图上方,而网页视图的下层安全区域设置会由标签栏的高度而增加. 您的网络应用程序必须满足以下要求, 使其内容不被标签栏覆盖 :

• 这个 viewport 您页面的元标签必须包含 viewport-fit=cover数字 :

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  

• 这个 ios.contentInset 配置选项必须设置为 never (默认). 与 always,该套件将应用两次.

• 您的内容必须尊重底层安全区域设置, 例如使用 padding-bottom: env(safe-area-inset-bottom)。 。 。 .

如果您使用 @capacitor/splash-screen,不配置 tabs 在您的电容配置中, 标签栏将显示在喷出屏幕上 。 相反,打电话 setTabs(...) 财务报告和审定财务报表 show() 之后 SplashScreen.hide()。 。 。 .

配置

这些配置值是可用的 :

实例

单位 capacitor.config.json数字 :

{
  "plugins": {
    "TabBar": {
      "tabs": [{ "id": "home", "title": "Home", "systemImage": "house.fill" }],
      "selectedTabId": "home",
      "selectedColor": "#007AFF",
      "unselectedColor": "#8E8E93"
    }
  }
}

单位 capacitor.config.ts数字 :

/// <reference types="@capawesome/capacitor-tab-bar" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    TabBar: {
      tabs: [{ "id": "home", "title": "Home", "systemImage": "house.fill" }],
      selectedTabId: "home",
      selectedColor: "#007AFF",
      unselectedColor: "#8E8E93",
    },
  },
};

export default config;

演示

iOS系统

使用量

以下示例显示如何设置标签栏并响应标签选择.

设置标签并显示标签栏

设置标签并显示标签栏 。 每个标签使用 SF 符号(systemImage)或来自您应用程序资产目录的图像( )image作为它的图标。 仅在iOS上可用 :

import { TabBar } from '@capawesome/capacitor-tab-bar';

const showTabBar = async () => {
  await TabBar.setTabs({
    tabs: [
      { id: 'home', title: 'Home', systemImage: 'house.fill' },
      { id: 'search', title: 'Search', systemImage: 'magnifyingglass' },
      { id: 'inbox', title: 'Inbox', systemImage: 'tray.fill', badge: '3' },
      { id: 'profile', title: 'Profile', image: 'profile-icon' },
    ],
    selectedTabId: 'home',
  });
  await TabBar.show();
};

const hideTabBar = async () => {
  await TabBar.hide();
};

或者,在您的 Capacitor 配置中配置标签以显示启动时的标签栏(参见 配置) (中文(简体) ).

监听标签选择

这个 tabSelected 每次用户点击标签,包括已经选中的标签,都会释放出事件。 仅在iOS上可用 :

import { TabBar } from '@capawesome/capacitor-tab-bar';

const addListener = async () => {
  await TabBar.addListener('tabSelected', event => {
    console.log('Tab selected:', event.id);
  });
};

在程序上选择标签

选择一个标签, 例如在您网络应用中导航后 。 此方法不会释放 tabSelected 活动。 仅在iOS上可用 :

import { TabBar } from '@capawesome/capacitor-tab-bar';

const selectTab = async () => {
  await TabBar.selectTabById({ id: 'search' });
};

更新徽章

打电话 setTabs(...) 重新使用更新的标签。 目前选中的标签仍为选中 。 仅在iOS上可用 :

import { TabBar } from '@capawesome/capacitor-tab-bar';

const updateBadge = async () => {
  await TabBar.setTabs({
    tabs: [
      { id: 'home', title: 'Home', systemImage: 'house.fill' },
      { id: 'search', title: 'Search', systemImage: 'magnifyingglass' },
      { id: 'inbox', title: 'Inbox', systemImage: 'tray.fill', badge: '4' },
      { id: 'profile', title: 'Profile', image: 'profile-icon' },
    ],
  });
};

自定义颜色

设置选中和未选中标签的颜色 。 未提供的颜色被重置为系统默认值。 在iOS 26上和后期,未选取的颜色没有效果,因为系统决定了液态玻璃上未选取的分页的颜色. 仅在iOS上可用 :

import { TabBar } from '@capawesome/capacitor-tab-bar';

const setColors = async () => {
  await TabBar.setColors({
    selectedColor: '#FF2D55',
    unselectedColor: '#8E8E93',
  });
};

离子框架

如果您使用 离子框架,可以替换 ion-tab-bar 使用 iOS 上的本地标签栏,并继续使用 Ionic 路由器进行导航:

1. 隐藏 ion-tab-bar iOS上的数据:

   .plt-ios ion-tab-bar {
     display: none;
   }
   

2. 使用路由器导航到已调制的标签, 当路由更改为其它标签时选择本地标签 。 本地标签使用相同的ID tab 您的财产 ion-tab-button 要素。 下例使用Angular,但同一方法与React和Vue配合:

   <ion-tabs (ionTabsDidChange)="handleTabsDidChange($event)">
     <!-- ... -->
   </ion-tabs>
   

   import { Component, OnInit } from '@angular/core';
   import { Router } from '@angular/router';
   import { Capacitor } from '@capacitor/core';
   import { TabBar } from '@capawesome/capacitor-tab-bar';
   
   @Component({
     selector: 'app-tabs',
     templateUrl: 'tabs.page.html',
   })
   export class TabsPage implements OnInit {
     private readonly isIos = Capacitor.getPlatform() === 'ios';
   
     constructor(private readonly router: Router) {}
   
     ngOnInit() {
       if (this.isIos) {
         void TabBar.addListener('tabSelected', ({ id }) => {
           void this.router.navigateByUrl(`/tabs/${id}`);
         });
       }
     }
   
     handleTabsDidChange(event: { tab: string }) {
       if (this.isIos) {
         void TabBar.selectTabById({ id: event.tab });
       }
     }
   }
   

3. 将您的内容与底部安全区域嵌入, 包括本地标签栏的高度 :

   ion-content {
     --padding-bottom: env(safe-area-inset-bottom);
   }
   

API 密码

• hide()
• selectTabById(...)
• setColors(...)
• setTabs(...)
• show()
• addListener('tabSelected', ...)
• removeAllListeners()
• 接口

隐藏( c)

hide() => Promise<void>

隐藏标签栏 .

标签保存并重置下层安全区域.

仅在iOS上可用.

自: 0.1.0 (中文(简体) )

选择 TabById(...)

selectTabById(options: SelectTabByIdOptions) => Promise<void>

选择带有给定ID的标签 .

此方法不会释放 tabSelected 活动.

仅在iOS上可用.

自: 0.1.0 (中文(简体) )

设置颜色(...)

setColors(options: SetColorsOptions) => Promise<void>

设置标签的颜色 .

未提供的颜色被重置为系统默认值.

仅在iOS上可用.

自: 0.1.0 (中文(简体) )

设置标签(...)

setTabs(options: SetTabsOptions) => Promise<void>

设置标签栏的标签 .

这将取代所有已存在的标签 . 带有标识的标签 selectedTabId 如果提供,则选中. 否则,如果当前选中的标签的ID仍然存在,或者第一个标签被选中,则该标签将保留选中.

这种方法不会改变标签栏的能见度.

仅在iOS上可用.

自: 0.1.0 (中文(简体) )

显示 ()

show() => Promise<void>

显示标签栏 .

标签栏放在屏幕下方和下方 安全区域内置的网页视图会因标签栏的高度而增加.

标签必须首先使用 setTabs(...) 或 tabs 配置 .

仅在iOS上可用.

自: 0.1.0 (中文(简体) )

添加倾听器( 未选中),...)

addListener(eventName: 'tabSelected', listenerFunc: (event: TabSelectedEvent) => void) => Promise<PluginListenerHandle>

用户点击标签时调用 .

如果用户点击已选中的标签, 也会释放此事件 .

仅在iOS上可用.

回返情况: Promise<PluginListenerHandle>

自: 0.1.0 (中文(简体) )

删除所有收听器( )

removeAllListeners() => Promise<void>

删除此插件的所有听众 .

仅在iOS上可用.

自: 0.1.0 (中文(简体) )

接口

选择 TabById 选项

设置颜色选项

设置标签选项

标签

插件听筒

标签选中事件

通讯

随时更新有关卡帕韦索姆、Capacitor和Ionic生态系统的最新消息和最新消息,因为我们 《卡帕索克通讯》。 。 。 .

更改日志

见 变动情况。 。 。 .

许可证

见 自由主义。 。 。 .