feat: 增加swiper的outside样式 (#1781)

* feat: 增加swiper的outside样式 * fix: 解决lint问题 * feat: 修改css变量名 * fix: 修复pr意见 --------- Co-authored-by: zelmazhou <zelmazhou@tencent.com>
Tencent · May 11, 2024 · 5a70236 · 5a70236
1 parent 9a57a1a
commit 5a70236
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 deletions.
diff --git a/style/mobile/components/swiper-nav/v2/_index.less b/style/mobile/components/swiper-nav/v2/_index.less
@@ -151,4 +151,21 @@
       }
     }
   }
+
+  &--outside {
+    bottom: 0;
+
+    .@{prefix}-swiper-nav {
+      &__dots,
+      &__dots-bar {
+        &-item {
+          background: @swiper-nav-outside-bg;
+
+          &--active {
+            background-color: @swiper-nav-outside-bg-active;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/style/mobile/components/swiper-nav/v2/_var.less b/style/mobile/components/swiper-nav/v2/_var.less
@@ -3,6 +3,8 @@
 @swiper-nav-dot-active-color: var(--td-swiper-nav-dot-active-color, @font-white-1);
 @swiper-nav-dot-size: var(--td-swiper-nav-dot-size, 6px);
 @swiper-nav-dots-bar-active-width: var(--td-swiper-nav-dots-bar-active-width, 20px);
+@swiper-nav-outside-bg: var(--td-swiper-nav-outside-bg, @gray-color-3);
+@swiper-nav-outside-bg-active: var(--td-swiper-nav-outside-bg-active, @brand-color-7);
 
 // fraction
 @swiper-nav-fraction-color: var(--td-swiper-nav-fraction-color, @font-white-1);

diff --git a/style/mobile/components/swiper/v2/_index.less b/style/mobile/components/swiper/v2/_index.less
@@ -16,6 +16,10 @@
     width: 100%;
     height: 100%;
     flex-shrink: 0;
+
+    & > * {
+      border-radius: @swiper-border-radius;
+    }
   }
 
   // 主要容器
@@ -33,4 +37,8 @@
       width: 100%;
     }
   }
+
+  &--outside {
+    padding-bottom: @swiper-placement-outside-padding;
+  }
 }
diff --git a/style/mobile/components/swiper/v2/_var.less b/style/mobile/components/swiper/v2/_var.less
@@ -1 +1,6 @@
+@import "../../swiper-nav/v2/_var.less";
 @swiper-border-radius: var(--td-swiper-border-radius, 8px);
+@swiper-placement-outside-padding: var(
+  --td-swiper-placement-outside-padding,
+  calc(@spacer-1 + @swiper-nav-dot-size)
+);