Skip to content

feat(TabBar): add Liquid Glass theme (iOS 26 style) - #2643

Open
Nerdlet369 wants to merge 3 commits into
Tencent:developfrom
Nerdlet369:feat/tabbar-liquid-glass
Open

feat(TabBar): add Liquid Glass theme (iOS 26 style)#2643
Nerdlet369 wants to merge 3 commits into
Tencent:developfrom
Nerdlet369:feat/tabbar-liquid-glass

Conversation

@Nerdlet369

Copy link
Copy Markdown

🤔 背景

Close #2571 — 为 Tabbar 组件新增液态玻璃(Liquid Glass)视觉效果,
对标 iOS 26 设计语言。

✨ 改动内容

tab-bar/_var.less — 新增 15 个 CSS 自定义属性:

  • --td-tab-bar-liquid-glass-bg — 玻璃背景色(亮色 / 暗色分离)
  • --td-tab-bar-liquid-glass-blur — 模糊强度(12px,对标 iOS26)
  • --td-tab-bar-liquid-glass-saturate — 色彩饱和度(180%)
  • --td-tab-bar-liquid-glass-border — 玻璃边缘边框
  • --td-tab-bar-liquid-glass-shadow — 外部投影
  • --td-tab-bar-liquid-glass-highlight — inset 高光
  • --td-tab-bar-liquid-glass-active-scale — 选中项放大倍率(1.06)
  • --td-tab-bar-liquid-glass-transition — 过渡时长

tab-bar/_index.less&--liquid-glass 修饰符:

  • backdrop-filter: blur(12px) saturate(180%) — 纯 CSS 实现
  • ::before 顶部高光模拟玻璃表面折射
  • @media (prefers-color-scheme: dark) 暗色模式自动适配

tab-bar-item/_index.less — 子项适配:

  • 透明背景
  • 选中态 scale(1.06) + 平滑过渡

🆚 与现有方案的差异

PR #2635 (SVG滤镜) 本 PR (纯CSS)
技术 feDisplacementMap backdrop-filter
Chrome 兼容 ❌ 不支持
暗色模式
选中动效

📷 效果

亮色模式:毛玻璃胶囊悬浮,带顶部高光和底部微光
暗色模式:深色半透明背景自动适配
选中项:1.06x 缩放 + 平滑过渡

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Tabbar] 悬浮胶囊效果支持液态玻璃的显示,对标ios26.

2 participants