Skip to content

feat(TabBar): add round-glass liquid glass shape - #2628

Open
LiamFan16-mikasa wants to merge 2 commits into
Tencent:developfrom
LiamFan16-mikasa:feat/tabbar-round-glass
Open

feat(TabBar): add round-glass liquid glass shape#2628
LiamFan16-mikasa wants to merge 2 commits into
Tencent:developfrom
LiamFan16-mikasa:feat/tabbar-round-glass

Conversation

@LiamFan16-mikasa

@LiamFan16-mikasa LiamFan16-mikasa commented Jul 13, 2026

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

close #2571
框架侧实现:Tencent/tdesign-mobile-vue#2261

💡 需求背景和解决方案

Issue #2571 希望 TabBar 悬浮胶囊支持 iOS 26 的液态玻璃质感。区别于普通磨砂,液态玻璃的关键是中心通透、折射集中在边缘(meniscus)、镜面流光、边缘轻微色散

本 PR 在 common 侧新增可共用的 round-glass 材质,并抽成可复用 mixin:

  • tab-bar/_var.less:液态玻璃设计 token(中心/边缘模糊、饱和度、透镜边宽、描边宽、高光、阴影、内高光光泽、色散、流光时长)+ opt-in 折射层 token。
  • tab-bar/_index.less:可复用 mixin .tab-bar-liquid-glass()(fab/dialog/popup 可复用)+ &--round-glass(中心轻磨砂、::before 边缘透镜、::after 镜面流光并在 prefers-reduced-motion 下关闭、inset 色散描边)+ &__glass 折射层(由 --td-tab-bar-glass-image / --td-tab-bar-glass-refract 驱动)。折射为 opt-in,组件不引用任何外部滤镜 id(零渲染风险),不支持时自动退化为磨砂。
  • tab-bar-item/_index.less:单项透明 + 按压弹簧回弹 + 自适应半透明选中胶囊。
  • docs/mobile/api/tab-bar.md / .en-US.md:液态玻璃 demo 占位。

全部 token 化可覆盖;仅动画 transform / background-position(60fps)。已用 lessc 和 stylelint 校验。

效果预览:

chrome-capture-2026-07-13

📝 更新日志

  • feat(TabBar): 新增液态玻璃悬浮胶囊 round-glass 形态
  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@LiamFan16-mikasa
LiamFan16-mikasa force-pushed the feat/tabbar-round-glass branch from 250dafa to 22d4806 Compare July 19, 2026 07:55
@github-actions

Copy link
Copy Markdown

TDesign Component Repositories CI Test Open

Component Lint Test Build Preview
tdesign-vue 👀
tdesign-vue-next 👀
tdesign-react 👀
tdesign-mobile-vue 👀
tdesign-mobile-react 👀

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants