diff --git a/packages/components/tab-bar-item/tab-bar-item.less b/packages/components/tab-bar-item/tab-bar-item.less
index 4d653592e6..fdc5781454 100644
--- a/packages/components/tab-bar-item/tab-bar-item.less
+++ b/packages/components/tab-bar-item/tab-bar-item.less
@@ -67,6 +67,21 @@
background-color: @tab-bar-active-bg;
}
+ // ─── Liquid Glass(液态玻璃)— 对标 iOS 26 ──────────
+ &--liquid-glass {
+ background: transparent;
+ transition: transform .3s cubic-bezier(.4, 0, .2, 1);
+
+ // 点击反馈:半透明光晕
+ &:active {
+ background-color: rgba(255, 255, 255, .12);
+ }
+ }
+
+ &--liquid-glass&--checked {
+ transform: scale(1.06);
+ }
+
// &--active {
// background-color: @tab-bar-hover-bg-color;
// }
diff --git a/packages/components/tab-bar/_example/liquid-glass/index.js b/packages/components/tab-bar/_example/liquid-glass/index.js
new file mode 100644
index 0000000000..7d84ad8b7b
--- /dev/null
+++ b/packages/components/tab-bar/_example/liquid-glass/index.js
@@ -0,0 +1,19 @@
+Component({
+ data: {
+ value: 'label_1',
+ list: [
+ { value: 'label_1', icon: 'home', ariaLabel: '首页' },
+ { value: 'label_2', icon: 'app', ariaLabel: '软件' },
+ { value: 'label_3', icon: 'chat', ariaLabel: '聊天' },
+ { value: 'label_4', icon: 'user', ariaLabel: '我的' },
+ ],
+ },
+
+ methods: {
+ onChange(e) {
+ this.setData({
+ value: e.detail.value,
+ });
+ },
+ },
+});
diff --git a/packages/components/tab-bar/_example/liquid-glass/index.json b/packages/components/tab-bar/_example/liquid-glass/index.json
new file mode 100644
index 0000000000..cf41292199
--- /dev/null
+++ b/packages/components/tab-bar/_example/liquid-glass/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "styleIsolation": "apply-shared",
+ "usingComponents": {
+ "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
+ "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
+ }
+}
diff --git a/packages/components/tab-bar/_example/liquid-glass/index.wxml b/packages/components/tab-bar/_example/liquid-glass/index.wxml
new file mode 100644
index 0000000000..e312204a8a
--- /dev/null
+++ b/packages/components/tab-bar/_example/liquid-glass/index.wxml
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/packages/components/tab-bar/_example/liquid-glass/index.wxss b/packages/components/tab-bar/_example/liquid-glass/index.wxss
new file mode 100644
index 0000000000..60690f81d1
--- /dev/null
+++ b/packages/components/tab-bar/_example/liquid-glass/index.wxss
@@ -0,0 +1,9 @@
+/* 液态玻璃示例需要一个有内容的背景才能看到玻璃效果 */
+.demo-section {
+ height: 200rpx;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ display: flex;
+ align-items: flex-end;
+ padding: 32rpx;
+ box-sizing: border-box;
+}
diff --git a/packages/components/tab-bar/_example/tab-bar.json b/packages/components/tab-bar/_example/tab-bar.json
index 293dc4dfe5..ce4a811d0e 100644
--- a/packages/components/tab-bar/_example/tab-bar.json
+++ b/packages/components/tab-bar/_example/tab-bar.json
@@ -7,6 +7,7 @@
"sub": "./sub",
"badge": "./badge",
"round": "./round",
+ "liquid-glass": "./liquid-glass",
"custom": "./custom"
}
}
diff --git a/packages/components/tab-bar/_example/tab-bar.wxml b/packages/components/tab-bar/_example/tab-bar.wxml
index 40ba2fe17d..b778730cb4 100644
--- a/packages/components/tab-bar/_example/tab-bar.wxml
+++ b/packages/components/tab-bar/_example/tab-bar.wxml
@@ -28,6 +28,9 @@
+
+
+
diff --git a/packages/components/tab-bar/tab-bar.less b/packages/components/tab-bar/tab-bar.less
index faafebea40..3a51a58353 100644
--- a/packages/components/tab-bar/tab-bar.less
+++ b/packages/components/tab-bar/tab-bar.less
@@ -43,4 +43,77 @@
bottom: constant(safe-area-inset-bottom);
bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
}
+
+ // ─── Liquid Glass(液态玻璃)— 对标 iOS 26 ──────────────
+ &--liquid-glass {
+ --td-tab-bar-liquid-glass-bg: rgba(255, 255, 255, .15);
+ --td-tab-bar-liquid-glass-blur: 12px;
+ --td-tab-bar-liquid-glass-saturate: 180%;
+ --td-tab-bar-liquid-glass-border: rgba(255, 255, 255, .25);
+ --td-tab-bar-liquid-glass-shadow: 0 16rpx 64rpx rgba(0, 0, 0, .12);
+ --td-tab-bar-liquid-glass-highlight: inset 0 2rpx 2rpx rgba(255, 255, 255, .4);
+ --td-tab-bar-liquid-glass-active-scale: 1.06;
+ --td-tab-bar-liquid-glass-transition: .3s cubic-bezier(.4, 0, .2, 1);
+ --td-tab-bar-liquid-glass-dispersion-warm: rgba(255, 100, 100, .04);
+ --td-tab-bar-liquid-glass-dispersion-cool: rgba(90, 130, 255, .04);
+
+ // 多层背景叠加:色散红/蓝边缘折射 + 底色
+ background:
+ radial-gradient(ellipse at 15% 50%, var(--td-tab-bar-liquid-glass-dispersion-warm) 0%, transparent 60%),
+ radial-gradient(ellipse at 85% 50%, var(--td-tab-bar-liquid-glass-dispersion-cool) 0%, transparent 60%),
+ var(--td-tab-bar-liquid-glass-bg);
+ backdrop-filter: blur(var(--td-tab-bar-liquid-glass-blur)) saturate(var(--td-tab-bar-liquid-glass-saturate));
+ -webkit-backdrop-filter: blur(var(--td-tab-bar-liquid-glass-blur)) saturate(var(--td-tab-bar-liquid-glass-saturate));
+ border: 1px solid var(--td-tab-bar-liquid-glass-border);
+ box-shadow: var(--td-tab-bar-liquid-glass-shadow), var(--td-tab-bar-liquid-glass-highlight);
+ transition: background var(--td-tab-bar-liquid-glass-transition),
+ backdrop-filter var(--td-tab-bar-liquid-glass-transition),
+ box-shadow var(--td-tab-bar-liquid-glass-transition);
+ margin-left: 32rpx;
+ margin-right: 32rpx;
+ border-radius: 999px;
+
+ // 顶部玻璃反光高光
+ &::before {
+ content: '';
+ position: absolute;
+ top: 2rpx;
+ left: 16rpx;
+ right: 16rpx;
+ height: 2rpx;
+ background: linear-gradient(90deg,
+ transparent 0%,
+ rgba(255, 255, 255, .5) 30%,
+ rgba(255, 255, 255, .6) 50%,
+ rgba(255, 255, 255, .5) 70%,
+ transparent 100%);
+ z-index: 1;
+ pointer-events: none;
+ }
+
+ // 底部微光
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 4rpx;
+ left: 24rpx;
+ right: 24rpx;
+ height: 2rpx;
+ background: linear-gradient(90deg,
+ transparent 0%,
+ rgba(255, 255, 255, .15) 50%,
+ transparent 100%);
+ pointer-events: none;
+ }
+
+ // 无障碍:尊重用户「减少动效」偏好
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+
+ &::before,
+ &::after {
+ display: none;
+ }
+ }
+ }
}
diff --git a/packages/components/tab-bar/tab-bar.wxml b/packages/components/tab-bar/tab-bar.wxml
index b3338a051a..29dceb1581 100644
--- a/packages/components/tab-bar/tab-bar.wxml
+++ b/packages/components/tab-bar/tab-bar.wxml
@@ -7,7 +7,7 @@
/>
diff --git a/packages/components/tab-bar/type.ts b/packages/components/tab-bar/type.ts
index c1c97cdbf1..b2b5199b5b 100644
--- a/packages/components/tab-bar/type.ts
+++ b/packages/components/tab-bar/type.ts
@@ -59,7 +59,7 @@ export interface TdTabBarProps {
*/
theme?: {
type: StringConstructor;
- value?: 'normal' | 'tag';
+ value?: 'normal' | 'tag' | 'liquid-glass';
};
/**
* 当前选中标签的索引