Skip to content

feat(TabBar): add liquid glass effect for round shape#2601

Open
zjh0326 wants to merge 2 commits into
Tencent:developfrom
zjh0326:feat/tab-bar-liquid-glass
Open

feat(TabBar): add liquid glass effect for round shape#2601
zjh0326 wants to merge 2 commits into
Tencent:developfrom
zjh0326:feat/tab-bar-liquid-glass

Conversation

@zjh0326

@zjh0326 zjh0326 commented Jul 2, 2026

Copy link
Copy Markdown
  • Add liquid glass design tokens in _var.less
  • Implement 7-layer glass rendering pipeline in _index.less
  • Support --liquid-glass modifier class for non-intrusive integration
  • Add round-liquid-glass demo to mobile api docs

Related issue: #2571

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

Closes #2571

💡 需求背景和解决方案

背景

TDesign 移动端 TabBar 组件的悬浮胶囊模式(shape="round" + theme="tag")目前使用普通圆角背景,缺乏层次感和现代感。本 PR 参考 iOS 26 / visionOS 的液态玻璃(Liquid Glass)设计语言,为悬浮胶囊添加玻璃质感效果。

解决方案

详见:
液态玻璃TabBar-技术规格书.md

原则:非侵入式设计 — 通过 --liquid-glass 修饰类实现,不影响原有 round 样式,现有用户无需任何修改即可继续使用原样式。

架构:独立胶囊模型 — 每个 tab-bar-item 为独立玻璃胶囊(非整条玻璃栏),包含以下 7 层渲染管线:

层级 实现 说明
托盘层 backdrop-filter: blur(16px) TabBar 容器轻量毛玻璃托盘
C1 体积阴影 4 层外 box-shadow 胶囊悬浮于托盘之上的漂浮效果
C2 凸面塑造 inset 内阴影 顶部亮边(聚光)+ 底部暗边(避光)
C3 基底模糊 backdrop-filter: blur(24px) saturate(200%) 高强度背景模糊 + 半透填充 rgba(130,130,150,0.25)
C4 Rim Light __content::before 1.2px 渐变高光 未选中 opacity:0.5(暗),选中 opacity:1(亮)
C5 底部反光 __content::after 0.8px 渐变 模拟玻璃底面透射的环境光
C6 色散层 conic-gradient 彩虹折射 顶部边缘极淡的虹彩色散(需 JS 注入 .cap-dispersion 元素)

使用方式:

<t-tab-bar v-model="value" shape="round" theme="tag" class="t-tab-bar--liquid-glass">
  <t-tab-bar-item v-for="item in list" :key="item.value" :value="item.value">
    <template #icon><t-icon :name="item.icon" /></template>
  </t-tab-bar-item>
</t-tab-bar>

注:完整的 JS 增强层(弹簧物理 + Canvas 实时焦散/反射/畸变渲染)在 tdesign-mobile-vue 仓库的 useLiquidGlass.ts composable 中实现,本 PR 仅包含 CSS 样式层。

UI 变动截图

图片

📝 更新日志

feat(TabBar): 为悬浮胶囊模式添加液态玻璃(Liquid Glass)效果,通过 class="t-tab-bar--liquid-glass" 启用,不影响原有样式

  • 本条 PR 不需要纳入 Changelog

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

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

  • 文档已补充或无须补充(demo 已在 tdesign-mobile-vue 中提供)
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充(纯样式变更)
  • Changelog 已提供或无须提供

📌 备注

本 PR 依赖于 tdesign-mobile-vue 仓库的修改:
Tencent/tdesign-mobile-vue#2254 (comment)

- Add liquid glass design tokens in _var.less
- Implement 7-layer glass rendering pipeline in _index.less
- Support --liquid-glass modifier class for non-intrusive integration
- Add round-liquid-glass demo to mobile api docs

Related issue: Tencent#2571
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