feat(TabBar): add liquid glass style variables and styles - #2635
Open
Adam-code-line wants to merge 1 commit into
Open
feat(TabBar): add liquid glass style variables and styles#2635Adam-code-line wants to merge 1 commit into
Adam-code-line wants to merge 1 commit into
Conversation
16 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是?
🔗 相关 Issue
closes #2571
💡 需求背景和解决方案
背景:TDesign 移动端 TabBar 组件的悬浮胶囊模式(
shape="round"+theme="tag")目前使用普通圆角背景,缺乏层次感和现代感。需要新增液态玻璃(Liquid Glass)样式支持,对标 iOS 26 设计风格。解决方案:
新增液态玻璃 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:内部光泽反射阴影,增加立体感新增液态玻璃样式实现(
style/mobile/components/tab-bar/_index.less)&--liquid-glass样式块,包含 4 层装饰效果:backdrop-filter: url(#filter)实现液态扭曲效果,使用 mask-image 排除中间区域backdrop-filter: blur(2px)背景模糊 + 半透明背景色,产生磨砂玻璃质感inset box-shadow定义边缘高光,增强玻璃边缘清晰度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),各装饰层圆角设为999pxUI效果
📝 更新日志
fix(组件名称): 处理问题或特性描述 ...
本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单