Tencent · Nerdlet369 · Jul 23, 2026 · Jul 23, 2026 · Jul 23, 2026 · Jul 25, 2026
@@ -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;
     // }

@@ -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,
+      });
+    },
+  },
+});
@@ -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"
+  }
+}
@@ -0,0 +1,25 @@
+<!--
+  液态玻璃（Liquid Glass）— 对标 iOS 26
+  纯 CSS 方案：backdrop-filter blur(12px) saturate(180%)
+  无 SVG 滤镜依赖，全平台兼容
+-->
+<view class="demo-section">
+  <t-tab-bar
+    t-class="t-tab-bar"
+    value="{{value}}"
+    shape="round"
+    theme="liquid-glass"
+    fixed="{{false}}"
+    split="{{false}}"
+    bindchange="onChange"
+  >
+    <t-tab-bar-item
+      wx:for="{{list}}"
+      wx:key="value"
+      value="{{item.value}}"
+      icon="{{item.icon}}"
+      ariaLabel="{{item.ariaLabel}}"
+    >
+    </t-tab-bar-item>
+  </t-tab-bar>
+</view>
@@ -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;
+}
@@ -7,6 +7,7 @@
     "sub": "./sub",
     "badge": "./badge",
     "round": "./round",
+    "liquid-glass": "./liquid-glass",
     "custom": "./custom"
   }
 }
@@ -28,6 +28,9 @@
   <t-demo desc="悬浮胶囊标签栏">
     <round />
   </t-demo>
+  <t-demo desc="液态玻璃标签栏（iOS26 风格）">
+    <liquid-glass />
+  </t-demo>
 
   <t-demo title="03 自定义" desc="自定义样式">
     <custom />

@@ -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;
+      }
+    }
+  }
 }
@@ -7,7 +7,7 @@
 />
 <view
   style="{{_._style(['z-index: ' + zIndex, safeAreaBottomReady ? '--safe-area-inset-bottom: ' + safeAreaBottomHeight + 'px' : '', style, customStyle])}}"
-  class="{{_.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape])}} class {{prefix}}-class"
+  class="{{_.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape, theme])}} class {{prefix}}-class"
   aria-role="tablist"
 >
   <slot />

@@ -59,7 +59,7 @@ export interface TdTabBarProps {
    */
   theme?: {
     type: StringConstructor;
-    value?: 'normal' | 'tag';
+    value?: 'normal' | 'tag' | 'liquid-glass';
   };
   /**
    * 当前选中标签的索引