Skip to content

feat(TabBar): add liquid glass style variables and styles - #2635

Open
Adam-code-line wants to merge 1 commit into
Tencent:developfrom
Adam-code-line:feat/tabbar-liquid-glass
Open

feat(TabBar): add liquid glass style variables and styles#2635
Adam-code-line wants to merge 1 commit into
Tencent:developfrom
Adam-code-line:feat/tabbar-liquid-glass

Conversation

@Adam-code-line

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

closes #2571

💡 需求背景和解决方案

背景:TDesign 移动端 TabBar 组件的悬浮胶囊模式(shape="round" + theme="tag")目前使用普通圆角背景,缺乏层次感和现代感。需要新增液态玻璃(Liquid Glass)样式支持,对标 iOS 26 设计风格。

解决方案

  1. 新增液态玻璃 CSS 变量style/mobile/components/tab-bar/_var.less

    • @tab-bar-liquid-glass-bg:液态玻璃背景色,默认 rgba(255, 255, 255, 0.12)
    • @tab-bar-liquid-glass-blur:背景模糊强度,默认 2px
    • @tab-bar-liquid-glass-sharp-border:锐利边框阴影,用于边缘定义
    • @tab-bar-liquid-glass-reflect:内部光泽反射阴影,增加立体感
  2. 新增液态玻璃样式实现style/mobile/components/tab-bar/_index.less

    • 新增 &--liquid-glass 样式块,包含 4 层装饰效果:
      • 外层(outer):SVG 位移映射滤镜层,通过 backdrop-filter: url(#filter) 实现液态扭曲效果,使用 mask-image 排除中间区域
      • 覆盖层(cover)backdrop-filter: blur(2px) 背景模糊 + 半透明背景色,产生磨砂玻璃质感
      • 锐利边框层(sharp)inset box-shadow 定义边缘高光,增强玻璃边缘清晰度
      • 反射层(reflect)inset box-shadow 模拟内部光泽反射
    • 标签项(.t-tab-bar-item)适配:
      • 背景透明(!important 覆盖默认背景色),让液态玻璃效果穿透显示
      • 选中项 scale(1.08) 放大凸起 + 投影增强,产生向屏幕方向突出的悬浮效果
      • 选中项图标/文字颜色使用品牌色(var(--td-tab-bar-active-color, @brand-color)
      • 未选中项图标/文字颜色使用半透明白色(rgba(255, 255, 255, 0.7)
      • 点击反馈使用半透明白色光晕(rgba(255, 255, 255, 0.15)
    • 液态玻璃与圆角胶囊结合时(&--liquid-glass&--round),各装饰层圆角设为 999px

UI效果

df6296aa42fabac4f02460b92b1b2c96

📝 更新日志

  • feat(TabBar): 新增液态玻璃(liquid-glass)悬浮胶囊样式,支持多层装饰效果(位移映射、背景模糊、锐利边框、光泽反射),选中项凸起悬浮效果
  • fix(组件名称): 处理问题或特性描述 ...

  • 本条 PR 不需要纳入 Changelog

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

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

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

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