feat(switch): update style for mobile (#1206)

* feat(switch): update style for mobile * fix: resolve lint errors
Tencent · Mar 17, 2023 · 0a70951 · 0a70951
1 parent d848bde
commit 0a70951
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 38 deletions.
diff --git a/docs/mobile/api_v2/switch.md b/docs/mobile/api_v2/switch.md
@@ -16,8 +16,12 @@ toc: false
 
 使用场景：需要通过描述解释、提示结果时，可用带描述开关
 
-{{ desc }}
+{{ label }}
 
-### 禁用状态
+### 组件状态
 
-{{ disabled }}
+{{ status }}
+
+### 开关尺寸
+
+{{ size }}
diff --git a/style/mobile/components/switch/v2/_index.less b/style/mobile/components/switch/v2/_index.less
@@ -5,8 +5,39 @@
 .@{prefix}-switch {
   display: flex;
   align-items: center;
+  vertical-align: middle;
+  width: @switch-width;
+  height: @switch-height;
+  border-radius: @switch-radius;
+  background-color: @switch-unchecked-color;
+  position: relative;
+  transition: all .3s ease;
   overflow: hidden;
 
+  &--checked {
+    background-color: @switch-checked-color;
+  }
+
+  &--disabled {
+    background-color: @switch-unchecked-disabled-color;
+  }
+
+  &--checked&--disabled {
+    background-color: @switch-checked-disabled-color;
+  }
+
+  &--large {
+    width: @switch-large-width;
+    height: @switch-large-height;
+    border-radius: @switch-large-radius;
+  }
+
+  &--small {
+    width: @switch-small-width;
+    height: @switch-small-height;
+    border-radius: @switch-small-radius;
+  }
+
   &__label {
     position: absolute;
     top: 0;
@@ -62,41 +93,6 @@
     color: @switch-label-checked-color;
   }
 
-  &__body {
-    vertical-align: middle;
-    width: @switch-width;
-    height: @switch-height;
-    border-radius: @switch-radius;
-    background-color: @switch-unchecked-color;
-    position: relative;
-    transition: all .3s ease;
-    overflow: hidden;
-
-    &--checked {
-      background-color: @switch-checked-color;
-    }
-
-    &--disabled {
-      background-color: @switch-unchecked-disabled-color;
-    }
-
-    &--checked&--disabled {
-      background-color: @switch-checked-disabled-color;
-    }
-
-    &--large {
-      width: @switch-large-width;
-      height: @switch-large-height;
-      border-radius: @switch-large-radius;
-    }
-
-    &--small {
-      width: @switch-small-width;
-      height: @switch-small-height;
-      border-radius: @switch-small-radius;
-    }
-  }
-
   &__dot {
     position: absolute;
     left: @switch-dot-horizontal-margin;