@capawesome/电容-android-edge-toe-toe-support 页面存档备份,存于互联网档案馆

支持的电容插件 边对边 在Android上显示高级特性,例如设置状态栏和导航栏的背景颜色.

在此之前	之后	在此之前	之后

请注意: 尽管它的名称,但这个插件默认不会启用边缘到边缘模式. 相反地,它通过在网页视图中应用适当的套接字来保留传统的应用行为,防止了Android的边缘到尖端变化影响还没有设计支持它的应用.

通讯

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

兼容性

安装

你可以用我们的 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-android-edge-to-edge-support` plugin in my project.

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

npm install @capawesome/capacitor-android-edge-to-edge-support
npx cap sync

机器人

电容系统列插件

确保禁用内置套件处理 电容系统列 您的插件 电容配置 文件 :

{
  "plugins": {
    "SystemBars": {
      "insetsHandling": "disable"
    }
  }
}

请注意,这个插件是Capacitor核心的一部分,而套接字处理是 总是默认启用。 。 。 .

电容键盘插件

如果你正在使用 电容键盘 插件,确保设置 resizeOnFullScreen 属性改为 false (默认) 电容配置 文件 :

{
  "plugins": {
    "Keyboard": {
      "resizeOnFullScreen": false
    }
  }
}

否则会调整网页视图的大小以适应屏幕, 这可能会给此插件带来问题, 查看 本评论。 。 。 .

配置

实例

单位 capacitor.config.json数字 :

{
  "plugins": {
    "EdgeToEdge": {
      "backgroundColor": "#ffffff",
      "navigationBarColor": "#000000",
      "statusBarColor": "#ffffff"
    }
  }
}

单位 capacitor.config.ts数字 :

/// <reference types="@capawesome/capacitor-android-edge-to-edge-support" />

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

const config: CapacitorConfig = {
  plugins: {
    EdgeToEdge: {
      backgroundColor: "#ffffff",
      navigationBarColor: "#000000",
      statusBarColor: "#ffffff",
    },
  },
};

export default config;

使用量

插件 只需要安装。它应用在网络视图中的设置来支持在Android上的边缘到边缘显示。 该插件还提供了一个设置状态栏和导航栏背景颜色的方法. 建议结合使用这种方法 系统条 插件 .

import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
import { SystemBars, SystemBarsStyle } from '@capacitor/core';

const enable = async () => {
  await EdgeToEdge.enable();
};

const disable = async () => {
  await EdgeToEdge.disable();
};

const getInsets = async () => {
  const result = await EdgeToEdge.getInsets();
  console.log('Insets:', result);
};

const setDarkStyle = async () => {
  await SystemBars.setStyle({ style: SystemBarsStyle.Dark });
  await EdgeToEdge.setBackgroundColor({ color: '#000000' });
};

const setLightStyle = async () => {
  await SystemBars.setStyle({ style: SystemBarsStyle.Light });
  await EdgeToEdge.setBackgroundColor({ color: '#FFFFFF' });
};

API 密码

• disable()
• enable()
• getInsets()
• setBackgroundColor(...)
• setNavigationBarColor(...)
• setStatusBarColor(...)
• 接口

禁用( c)

disable() => Promise<void>

禁用边缘到边缘模式 .

只能从Android上找到.

自: 7.2.0 联合国

启用( )

enable() => Promise<void>

启用边缘到边缘模式 .

只能从Android上找到.

自: 7.2.0 联合国

获取 Insets ()

getInsets() => Promise<GetInsetsResult>

返回当前应用于网页视图的套件 .

只能从Android上找到.

回返情况: Promise<GetInsetsResult>

自: 7.2.0 联合国

设置背景颜色(...)

setBackgroundColor(options: SetBackgroundColorOptions) => Promise<void>

设置状态栏和导航栏的背景颜色.

只能从Android上找到.

自: 7.0.0 (单位:千美元)

设置导航Bar Color (...)

setNavigationBarColor(options: SetNavigationBarColorOptions) => Promise<void>

设置导航栏区域的背景颜色.

只能从Android上找到.

自: 8.0.0 (单位:千美元)

状态Bar Color (...)

setStatusBarColor(options: SetStatusBarColorOptions) => Promise<void>

设置状态栏区域的背景颜色 .

只能从Android上找到.

自: 8.0.0 (单位:千美元)

接口

获取集结果

设置背景颜色选项

设置导航栏颜色选项

设置状态栏颜色选项

财务问题

8号控制器的内置边缘对接支援呢?

8号电容通过内部引入了本地边缘到边缘的功能 SystemBars 插件 。 虽然这涵盖了许多常见的情况,但这个插件解决了Capacitor核心执行中尚未完全解决的额外边缘案例. 我们计划一旦所有边缘案件在Capacitor核心得到妥善处理后,就对该插件进行贬值.

这个插件是否兼容 Capacitor 的 SystemBars API ?

是, 此插件与新插件部分兼容 系统条 API 8. 例如: setStyle() 从SystemBars API得到支持,可以与此插件并用,而无需冲突.

更改日志

见 变动情况。 。 。 .

许可证

见 自由主义。 。 。 .