@ajuarezso/电容器-液晶

Real iOS 26 Liquid Glass 原生铬(TabBar + searchBar + profile for more),用于Capacitor应用. 唯一一个曝光 Apple 真实的 Capacitor 插件( 截至 2026) .glassEffect() 渲染——不是CSS backdrop-filter 相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

埃斯帕尼奥尔: 读取

为什么会这样

介绍iOS 26 液体玻璃 ——将模糊态+动态折射态+边缘态相结合的新型系统材料突出该变化与基础内容+形态过渡态+触动-反应变形态+有锡/清晰变相. 苹果公司将它用于新的TabBar,Navigation Bar, Sheps, Menus,动态岛,音乐应用,App Store,以及控制中心.

截至2026年,这是唯一一个能曝光真实的 Capacitor 插件 UIGlassEffect 通过浮在WebView上方的本地覆盖. CSS 等网络替代品 backdrop-filter, (中文(简体) ), mix-blend-mode,而SVG过滤器可以模仿静态模糊而不能复制:

• 动态折射( 轻弯曲, 基于运动)
• 边缘突出这一具有基本内容的转变
• 粉碎元素之间的过渡( 例如, 选项卡丸在项目之间滑动)
• 触摸反应变形(按下时为"squish")
• 系统一级动态岛屿和控制中心一体化

这些需要私人金属遮阳剂,苹果不会暴露于 WKWebView。唯一的路径是 本地覆盖 锁定在 WebView 上方, 这正是这个插件所做的 .

今日运出(v0.3.x)

在不支持的平台(Android,Web,iOS < 26)上,插件是一个优雅的"不"(no-op)——你的CSS/HTML倒置继续工作.

安装

npm install @ajuarezso/capacitor-liquid-glass
npx cap sync ios

iOS 最小目标 : 15.0。 。 。 . 真正的液体玻璃需要iOS 26+;在老iOS上,当地人 UITabBar 编号 : UISearchBar 仍然制造,但没有液态玻璃材料.

快开始

标签栏

import { LiquidGlass } from '@ajuarezso/capacitor-liquid-glass';

await LiquidGlass.showTabBar({
  items: [
    { id: '/home',    label: 'Home',    sfSymbol: 'house' },
    { id: '/search',  label: 'Search',  sfSymbol: 'magnifyingglass' },
    { id: '/cart',    label: 'Cart',    sfSymbol: 'bag', badge: '3' },
    { id: '/profile', label: 'Profile', sfSymbol: 'person' },
  ],
  selectedIndex: 0,
  tintColor: '#FA7319',
  tabBarStyle: 'liquidGlass',  // 'default' | 'ultraThin' | 'transparent' | 'liquidGlass'
});

await LiquidGlass.addListener('tabSelected', ({ id, index }) => {
  console.log('Tab tapped:', id, index);
});

await LiquidGlass.updateTabBadge({ id: '/cart', badge: '5' });
await LiquidGlass.setSelectedTab({ id: '/profile' });
await LiquidGlass.hideTabBar();

搜索栏

await LiquidGlass.showSearchBar({
  placeholder: 'Search',
  cancelText: 'Cancel',
  tintColor: '#FA7319',
});

await LiquidGlass.addListener('searchTextChanged', ({ text }) => {
  console.log('User typed:', text);
});
await LiquidGlass.addListener('searchSubmitted', ({ text }) => {
  console.log('User submitted:', text);
});
await LiquidGlass.addListener('searchCancelled', () => {
  console.log('User tapped cancel');
});

await LiquidGlass.clearSearchText();
await LiquidGlass.hideSearchBar();

API 参考

标签栏

showTabBar(options): Promise<void>

interface ShowTabBarOptions {
  items: LiquidGlassTabItem[];
  selectedIndex?: number;            // default 0
  tintColor?: string;                 // '#RRGGBB'
  tabBarStyle?: TabBarStyle;          // 'default' | 'ultraThin' | 'transparent' | 'liquidGlass'
  containerElement?: string | HTMLElement;  // bind to an HTML element (see below)
}

interface LiquidGlassTabItem {
  id: string;          // stable id emitted in events
  label: string;       // text under the icon
  sfSymbol: string;    // SF Symbol name, e.g. 'house.fill'
  badge?: string;      // '3' or '•' or undefined
}

containerElement ——将栏与 HTML 元素(iOS)绑定

默认情况下,标签栏会把自己钉入屏幕下方。 过 containerElement (一个元素 id,或 HTMLElement改为: 换成 将原生栏粘入您布局中元素的界限 —— 说 与Capacitor Google地图占位符元素相同的想法。 ()1号(中文(简体) )

await LiquidGlass.showTabBar({
  items: [...],
  containerElement: 'tab-bar-slot',  // <div id="tab-bar-slot"> in your DOM
});

<!-- A placeholder that reserves where the native bar should sit. -->
<div id="tab-bar-slot" style="
  position: fixed; left: 16px; right: 16px; bottom: 24px;
  height: calc(64px + env(safe-area-inset-bottom));">
</div>

如何运作:

• 插件测量元素的 getBoundingClientRect() 和立场 本地栏( 上上覆) 匹配 —— CSS px 映射 1:1 到 UIKit 点 a WKWebView,所以没有应用缩放.
• 它自动重同步 ResizeObserver + 滚动 + 旋转 + 键盘 (单位:千美元)visualViewport),所有连接通过 requestAnimationFrame 所以120赫兹 卷起火力,每帧最多一次重定位.
• 元素是一个 只有布局占位符 - 保持空/透明 土生土长的酒吧在上面 解决和衡量发生在联合来文中 HTMLElement 从不穿越本土桥梁.

⚠️ 要包含的元素大小 env(safe-area-inset-bottom) 当它坐在 底边. 原生栏正好填充元素的矩形——如果 元素比栏的自然高度( ~49 pt + 安全区域)短 被剪掉的标签/相片。 如果测量到的矩形是 0 内 任意尺寸插件会倒回下方.

纯粹 职位 更改 a position: fixed 元素点出否 scroll编号 :resize编号 :ResizeObserver 事件不会自动重同步 。 打电话 showTabBar(...) (便宜——它重新计量) 低级 setTabBarBounds(...) 你自己来.

setTabBarBounds({ bounds }): Promise<void>

低等逃生舱口(iOS):将栏杆重新定位为明确矩形 (单位:千美元){ x, y, width, height } 在CSS px,视图-相对). 绑定层 传球时,为您开这个 containerElement; 只有在 您自己测量元素。 网络/Android上的禁用和当栏不是时 显示.

hideTabBar(): Promise<void>

隐藏而不破坏配置。 用于全屏模式/地图.

setSelectedTab({ index?, id? }): Promise<void>

程序选择(深链接,内部导航).

updateTabBadge({ id, badge }): Promise<void>

更新单个徽章而无需重新配置整条栏(保留选择).

getTabBarLayout(): Promise<{ height, bottomSafeArea }>

返回以点为单位的布局以保留内容粘贴.

搜索栏

showSearchBar(options?): Promise<void>

interface ShowSearchBarOptions {
  placeholder?: string;
  initialText?: string;
  cancelText?: string;
  tintColor?: string;
  hideCancelButton?: boolean;
}

hideSearchBar(): Promise<void>

clearSearchText(): Promise<void>

活动

角实例

import { Component, inject, signal } from '@angular/core';
import { LiquidGlass } from '@ajuarezso/capacitor-liquid-glass';
import { Capacitor } from '@capacitor/core';
import { Router } from '@angular/router';

@Component({ selector: 'app-shell', template: '<router-outlet />' })
export class AppShell {
  private router = inject(Router);

  async ngOnInit() {
    if (!Capacitor.isNativePlatform()) return;

    await LiquidGlass.showTabBar({
      items: [
        { id: '/home', label: 'Home', sfSymbol: 'house' },
        { id: '/cart', label: 'Cart', sfSymbol: 'bag' },
      ],
      tabBarStyle: 'liquidGlass',
    });

    LiquidGlass.addListener('tabSelected', ({ id }) => {
      this.router.navigate([id]);
    });
  }
}

对于不支持的平台(Android, Web),将您的 CSS / Tailwind 标签栏设置为 : Capacitor.getPlatform()。 。 。 .

与替代品的比较

为什么不只是CSS backdrop-filter? 吗?

因为它是一个根本不同的效果:

• 支助科 backdrop-filter: blur(20px) 只是静态模糊 后面是什么。 就是这样.
• iOS 26 液态玻璃UIGlassEffect(中文(简体) ) + 模糊 + 动态折射 + 边缘 突出显示在元素之间与内容运动的相变相相变相(滑动的分页平面) + 触动-反应变形 + 锡变相 + 系统动态岛集成. 苹果公司使用私人金属遮阳器 没有 被曝出WKWebView.

如果你只需要一个营销网站或非iOS应用程序的静态玻璃形态,只需使用CSS. 如果您需要真实的 Apple iOS 26 在 iPhone 运行的 Capacitor app 上查看,这个插件是最短的路径.

路线图

• 页:1: 有液体玻璃背景的标签栏
• 页:1: 搜索栏覆盖
• 页:1: 样式变体 ('default' 编号 : 'ultraThin' 编号 : 'transparent' 编号 : 'liquidGlass'(中文(简体) )
• 页:1: 将 TabBar 绑入 HTML 元素(containerElement(中文(简体) )1号(中文(简体) )
• 导航 栏(大标题、领头/领头项目)
• 工具栏( 像 Safari 等浮动工具栏)
• 警报(标准和破坏性)
• 带有偏移的工作表
• 菜单/ 弹出
• Android 材料3 表达式等同物

公关欢迎.

限制

1. 真正的液态玻璃所需的iOS 26。在 iOS 15-25 上,插件仍然使本地化 UITabBar 编号 : UISearchBar 但是没有液态玻璃材料——回到 UIBlurEffect.systemThinMaterial。 。 。 .

2. Android是没有的材料3 示意等同物列于行进图上,但尚未发运。 让你自己的倒计时.

3. 本地覆盖浮出网络视频,所以它不会与您的网络路由器的路由器转换相匹配。 使用 hideTabBar() 输入不显示标签栏的全屏路径时.

4. 应用程序存储: 此插件只使用公共的 Apple API. 没有私人API风险.

5. containerElement 约束 在调整大小/滚动/旋转/键盘上重新同步,但 没有 在纯正的位置移动一个 position: fixed 元素,该元素不释放 DOM 事件。 回顾 showTabBar(...) (或 setTabBarBounds(...))在这样的动作后. 还要将绑定的元素大小包括底部安全区域(见 containerElement 上面的docs)或被剪去的栏.

可发现的关键词

这个插件解决了:电容器液相玻璃,ios 26 液相玻璃电容器,电容器标签条原生地,电容器搜索条原生地,ionic液相玻璃,ios 26 UIGlasseffect电容器,电容器玻璃形态原生地,电容器原生地铬,电容器UITabBar,电容器UISearch Bar,电容器角取出取出取出取出电容器液相玻璃.

相关项目:

• 支助科 backdrop-filter (不是真正的液体玻璃,只是模糊)
• @capacitor/status-bar (不同的关切——仅限地位栏)
• 反应本地模糊库( 不同的框架)
• 标签条的电容社区插件( 使用 HTML/ CSS, 不使用原生液体玻璃)

仓库

• 资料来源: https://github.com/anthonyjuarezsolis/电容器-液晶
• 问题: https://github.com/anthonyjuarezsolis/电容器-液晶/问题
• npm: https://www.npmjs.com/package/@ajuarezso/ 电容-液体-玻璃
• 在 iPhone 17 Pro Max 运行 iOS 26.5 上建造并核实

许可证

麻省理工学院 安东尼·华雷斯·索利斯——见 自由主义