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'; }; /** * 当前选中标签的索引