电容导航栏插件

用于设置导航栏背景颜色和按钮样式的电容插件.

特征

Capacitor导航条插件为自定义Capacitor应用中的Android导航条提供了最完整的解决方案之一. 以下是一些关键特征:

• 🎨 背景颜色: 将导航栏背景设置为任何十六进制颜色或完全透明.
• 🔘 按钮样式: 选择暗或淡导航条按钮,或跟随系统外观.
• ➖ 分隔符颜色:自定义Android 9+上的导航条分色.
• 👁️ 可见度:按要求隐藏或显示导航栏.
• ⚙️ 配置:通过Capacitor配置在应用启动时应用默认值.
• 🤝 兼容性: 与 Android 暗模式支持, (中文(简体) ), Android 边缘到边缘支持 财务报告和审定财务报表 家庭指标 插件 .
• 🔁 最新数据:总是支持最新的Capacitor版本.
• ⭐️ 支助: 卡帕韦斯克团队优先支持.
• ✨ 手工业:由地而上地而上以关怀和专长而来,不是要塞或AI生成.

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

使用大小写

导航栏插件一般用于使Android系统导航栏与应用程序的设计相融合,例如:

• 品牌主题: 将导航栏背景设定为您的品牌颜色, 这样它就能与您的应用程序的其余部分匹配 .
• 暗模式支持:当用户在光和暗的主题之间切换时切换导航栏颜色和按钮样式.
• 记忆中的经历:隐藏用于视频或游戏等全屏内容的导航栏,然后再次显示.
• 一致的应用启动:在应用启动时通过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-navigation-bar` plugin in my project.

如果你喜欢 手动设置,通过运行下列命令来安装插件:

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

配置

实例

单位 capacitor.config.json数字 :

{
  "plugins": {
    "NavigationBar": {
      "color": "#ffffff",
      "dividerColor": "#d9d9d9",
      "style": "LIGHT"
    }
  }
}

单位 capacitor.config.ts数字 :

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

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

const config: CapacitorConfig = {
  plugins: {
    NavigationBar: {
      color: "#ffffff",
      dividerColor: "#d9d9d9",
      style: "LIGHT",
    },
  },
};

export default config;

使用量

以下例子显示如何设置导航条颜色和按钮样式,读取当前颜色和样式,并隐藏并显示导航条.

设置导航栏颜色

将导航栏的背景颜色设定为任何十六进制颜色,或通过 'transparent' 使其完全透明。 仅在Android上可用:

import { NavigationBar } from '@capawesome/capacitor-navigation-bar';

const setColor = async () => {
  await NavigationBar.setColor({ color: '#ffffff' });
};

设置按钮样式

选择暗或淡导航栏按钮,或使用 Style.Default 以跟踪当前设备的外观。 仅在Android上可用:

import { NavigationBar, Style } from '@capawesome/capacitor-navigation-bar';

const setStyle = async () => {
  await NavigationBar.setStyle({ style: Style.Light });
};

读取当前颜色和样式

获取导航栏当前背景颜色和按钮样式。 仅在Android上可用:

import { NavigationBar } from '@capawesome/capacitor-navigation-bar';

const getColor = async () => {
  const { color } = await NavigationBar.getColor();
  return color;
};

const getStyle = async () => {
  const { style } = await NavigationBar.getStyle();
  return style;
};

隐藏并显示导航栏

按要求隐藏导航栏,例如全屏内容,然后再次显示。 仅在Android上可用:

import { NavigationBar } from '@capawesome/capacitor-navigation-bar';

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

const show = async () => {
  await NavigationBar.show();
};

API 密码

• getColor()
• getStyle()
• hide()
• setColor(...)
• setStyle(...)
• show()
• 接口
• 数字

获取颜色( C)

getColor() => Promise<GetColorResult>

获取导航栏当前背景颜色 .

只能从Android上找到.

回返情况: Promise<GetColorResult>

自: 8.0.0 (单位:千美元)

获取Style ()

getStyle() => Promise<GetStyleResult>

获取导航条按钮的当前样式 .

只能从Android上找到.

回返情况: Promise<GetStyleResult>

自: 8.0.0 (单位:千美元)

隐藏( c)

hide() => Promise<void>

隐藏导航栏 .

只能从Android上找到.

自: 8.0.0 (单位:千美元)

设置颜色(...)

setColor(options: SetColorOptions) => Promise<void>

设置导航栏的背景颜色.

只能从Android上找到.

自: 8.0.0 (单位:千美元)

设置样式(...)

setStyle(options: SetStyleOptions) => Promise<void>

设置导航条按钮的样式.

只能从Android上找到.

自: 8.0.0 (单位:千美元)

显示 ()

show() => Promise<void>

显示导航栏 .

只能从Android上找到.

自: 8.0.0 (单位:千美元)

接口

获取颜色结果

获得 Style 成果

设置颜色选项

设置样式选项

数字

样式

财务问题

为什么 setColor 财务报告和审定财务报表 setStyle 在Android 15+上不起作用的方法?

从Android 15开始,系统执行 边缘到边缘显示 默认。 在此模式下,导航栏完全透明 Window.setNavigationBarColor 因此,通过这个插件设置颜色没有可见效果. 如果您的应用程序瞄准了Android 15+,并且您想要给导航栏区域配色,请使用 @capawesome/capacitor-android-edge-to-edge-support 插件,它描绘了导航栏后面的覆盖.

为什么这个插件在iOS上无法使用?

iOS没有可以和Android上一样定制的系统导航条. 因此,此插件的所有方法在iOS上都没有执行,并错误地拒绝.

我该如何让导航栏透明化?

过 'transparent' 作为颜色到 setColor 方法或用作 color 数值 电容配置。也可以通过 'transparent' 作为 dividerColor 以隐藏导航条分隔符.

我可以应用一种颜色和风格 在应用程序发布?

是的,你可以定义 color, (中文(简体) ), dividerColor,以及 style 属性 NavigationBar 区域。 插件在应用程序启动时应用这些默认值, 所以你不必调用 setColor 或者说 setStyle 手动. 见 配置 例.

我能用这个插件吗? 有Ionic、React、Vue或Angular?

是的,插件是框架不可知的。 它在任意网络框架的Capacitor app中工作,包括有Angular,React,或Vue的Ionic,以及平版JavaScript等项目.

相关插件

• Android 暗模式支持: Android 的无缝暗模式支持 prefers-color-scheme 兼容性.
• Android 边缘到边缘支持:在Android上支持边缘到边缘显示,包括设置状态栏和导航栏的背景颜色.
• 家庭指标:隐藏并显示iOS上的家用指示器.
• 屏幕方向:锁定并解锁屏幕取向.

通讯

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

更改日志

见 变动情况。 。 。 .

许可证

见 自由主义。 。 。 .