Skip to content

feat(TabBar): add 'liquid-glass' theme option - #4579

Open
Nerdlet369 wants to merge 4 commits into
Tencent:developfrom
Nerdlet369:feat/tabbar-liquid-glass
Open

feat(TabBar): add 'liquid-glass' theme option#4579
Nerdlet369 wants to merge 4 commits into
Tencent:developfrom
Nerdlet369:feat/tabbar-liquid-glass

Conversation

@Nerdlet369

@Nerdlet369 Nerdlet369 commented Jul 23, 2026

Copy link
Copy Markdown

🤔 背景

依赖 tdesign-common PR: Tencent/tdesign-common#2643
为小程序 Tabbar 组件新增 theme="liquid-glass" 选项,
实现 iOS 26 液态玻璃风格悬浮胶囊导航栏。

✨ 改动内容

组件层:

  • type.tstheme 扩展为 'normal' | 'tag' | 'liquid-glass'
  • tab-bar.wxml — 将 theme 传入根元素 CSS 类名(使样式修饰符生效)
  • tab-bar.less — 新增 &--liquid-glass 样式块(backdrop-filter + 伪元素高光)
  • tab-bar-item.less — 子项透明背景 + 选中态 scale(1.06) 动效

示例页(_example/liquid-glass/):

  • 4 个文件:WXML / JS / JSON / WXSS
  • 渐变紫色背景让玻璃模糊效果清晰可见
  • 已注册到 _example/tab-bar.jsontab-bar.wxml

🧪 用法

<t-tab-bar shape="round" theme="liquid-glass" split="{{false}}">
  <t-tab-bar-item wx:for="{{list}}" value="{{item.value}}" icon="{{item.icon}}" />
</t-tab-bar>

@pkg-pr-new

pkg-pr-new Bot commented Jul 29, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/tdesign-miniprogram@4579
npm i https://pkg.pr.new/@tdesign/uniapp@4579
npm i https://pkg.pr.new/@tdesign/uniapp-chat@4579

commit: da5f2f7

@tdesign-bot

Copy link
Copy Markdown
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-miniprogram 完成
@tdesign-miniprogram/chat 完成
tdesign-uniapp 完成
tdesign-uniapp-chat 完成

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.

3 participants