feat(TabBar): add liquid glass effect for round shape#2601
Open
zjh0326 wants to merge 2 commits into
Open
Conversation
- 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
Open
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.
Related issue: #2571
🤔 这个 PR 的性质是?
🔗 相关 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)inset内阴影backdrop-filter: blur(24px) saturate(200%)rgba(130,130,150,0.25)__content::before1.2px 渐变高光__content::after0.8px 渐变conic-gradient彩虹折射.cap-dispersion元素)使用方式:
UI 变动截图
📝 更新日志
feat(TabBar): 为悬浮胶囊模式添加液态玻璃(Liquid Glass)效果,通过
class="t-tab-bar--liquid-glass"启用,不影响原有样式☑️ 请求合并前的自查清单
tdesign-mobile-vue中提供)📌 备注
本 PR 依赖于 tdesign-mobile-vue 仓库的修改:
Tencent/tdesign-mobile-vue#2254 (comment)