fix: 适配v14

irisSong · irisSong · commit 400e21452d87 · 2024-11-18T17:13:57.000+08:00
diff --git a/src/packages/switch/demos/h5/demo5.tsx b/src/packages/switch/demos/h5/demo5.tsx
@@ -1,11 +1,24 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react'
+import { Cell, Space, Switch } from '@nutui/nutui-react'
 import { Check, Close } from '@nutui/icons-react'
 
 const Demo5 = () => {
   return (
     <Cell>
-      <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} />
+      <Space>
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+        />
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+          disabled
+        />
+        <Switch activeText={<Check />} inactiveText={<Close />} disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/taro/demo5.tsx b/src/packages/switch/demos/taro/demo5.tsx
@@ -1,11 +1,24 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
+import { Cell, Space, Switch } from '@nutui/nutui-react-taro'
 import { Check, Close } from '@nutui/icons-react-taro'
 
 const Demo5 = () => {
   return (
     <Cell>
-      <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} />
+      <Space>
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+        />
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+          disabled
+        />
+        <Switch activeText={<Check />} inactiveText={<Close />} disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
@@ -58,22 +58,28 @@
     white-space: nowrap;
     color: $switch-label-text-color;
     font-size: $switch-label-font-size;
+    .nut-icon {
+      color: $switch-label-text-color;
+    }
     &-open {
-      margin: 0 calc($switch-height - $switch-border-width + 5px) 0 7px;
+      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       &-rtl {
-        margin: 0 7px 0 calc($switch-height - $switch-border-width + 5px);
+        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       }
     }
 
     &-close {
-      margin: 0 7px 0 calc($switch-height - $switch-border-width + 5px);
+      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       &-rtl {
-        margin: 0 calc($switch-height - $switch-border-width + 5px) 0 7px;
+        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       }
     }
 
     &-close-disabled {
       color: $switch-close-disabled-label-text-color;
+      .nut-icon {
+        color: $switch-close-disabled-label-text-color;
+      }
     }
   }
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -882,9 +882,23 @@ $switch-inside-border-radius: var(
   --nutui-switch-inside-border-radius,
   $radius-full
 ) !default;
+/* #ifdef harmony */
 $switch-inside-box-shadow: var(
   --nutui-switch-inside-box-shadow,
-  0px 2px 6px 0px rgba(0, 0, 0, 0.4)
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1)
+) !default;
+/* #endif */
+/* #ifndef harmony */
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 1px 0px rgba(0, 0, 0, 0.06),
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1),
+  0px 0px 0px 1px rgba(0, 0, 0, 0.02)
+) !default;
+/* #endif */
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1)
 ) !default;
 $switch-label-text-color: var(
   --nutui-switch-label-text-color,

Original file line number	Diff line number	Diff line change
`@@ -58,22 +58,28 @@`
`58`	`58`	`white-space: nowrap;`
`59`	`59`	`color: $switch-label-text-color;`
`60`	`60`	`font-size: $switch-label-font-size;`
	`61`	`+ .nut-icon {`
	`62`	`+ color: $switch-label-text-color;`
	`63`	`+ }`
`61`	`64`	`&-open {`
`62`		`- margin: 0 calc($switch-height - $switch-border-width + 5px) 0 7px;`
	`65`	`+ margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;`
`63`	`66`	`&-rtl {`
`64`		`- margin: 0 7px 0 calc($switch-height - $switch-border-width + 5px);`
	`67`	`+ margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);`
`65`	`68`	`}`
`66`	`69`	`}`
`67`	`70`
`68`	`71`	`&-close {`
`69`		`- margin: 0 7px 0 calc($switch-height - $switch-border-width + 5px);`
	`72`	`+ margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);`
`70`	`73`	`&-rtl {`
`71`		`- margin: 0 calc($switch-height - $switch-border-width + 5px) 0 7px;`
	`74`	`+ margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;`
`72`	`75`	`}`
`73`	`76`	`}`
`74`	`77`
`75`	`78`	`&-close-disabled {`
`76`	`79`	`color: $switch-close-disabled-label-text-color;`
	`80`	`+ .nut-icon {`
	`81`	`+ color: $switch-close-disabled-label-text-color;`
	`82`	`+ }`
`77`	`83`	`}`
`78`	`84`	`}`
`79`	`85`