fix(countup): 分隔符文字颜色支持css变量修改

jdf2e · Dec 18, 2024 · 22d4c62 · 22d4c62
1 parent 7489260
commit 22d4c62
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 1 deletion.
diff --git a/src/packages/animatingnumbers/countup.scss b/src/packages/animatingnumbers/countup.scss
@@ -25,7 +25,7 @@
     display: flex;
     height: 80%;
     align-items: flex-end;
-    color: $countup-bg-color;
+    color: $countup-separator-color;
   }
 
   &-number {

diff --git a/src/packages/animatingnumbers/demos/h5/demo2.tsx b/src/packages/animatingnumbers/demos/h5/demo2.tsx
@@ -7,6 +7,7 @@ const Demo2 = () => {
     nutuiCountupBgColor: `var(--nutui-color-primary)`,
     nutuiCountupColor: `#fff`,
     nutuiCountupLrMargin: `1px`,
+    nutuiCountupSeparatorColor: `var(--nutui-color-primary)`,
   }
   const [value, setEndNumer] = useState('1570.99')
   useEffect(() => {

diff --git a/src/packages/animatingnumbers/demos/taro/demo2.tsx b/src/packages/animatingnumbers/demos/taro/demo2.tsx
@@ -7,6 +7,7 @@ const Demo2 = () => {
     nutuiCountupBgColor: `var(--nutui-color-primary)`,
     nutuiCountupColor: `#fff`,
     nutuiCountupLrMargin: `1px`,
+    nutuiCountupSeparatorColor: `var(--nutui-color-primary)`,
   }
   const [value, setEndNumer] = useState('1570.99')
   useEffect(() => {

diff --git a/src/packages/animatingnumbers/doc.en-US.md b/src/packages/animatingnumbers/doc.en-US.md
@@ -53,3 +53,4 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-countup-lr-margin | margin of item | `0` |
 | \--nutui-countup-bg-color | background color of item | `inherit` |
 | \--nutui-countup-color | color of item | `$color-title` |
+| \--nutui-countup-separator-color | The font color of the separator | `$color-title` |
diff --git a/src/packages/animatingnumbers/doc.md b/src/packages/animatingnumbers/doc.md
@@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react'
 | \--nutui-countup-lr-margin | 每个数字的margin | `0` |
 | \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` |
 | \--nutui-countup-color | 每个数字块的字色 | `$color-title` |
+| \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` |
diff --git a/src/packages/animatingnumbers/doc.taro.md b/src/packages/animatingnumbers/doc.taro.md
@@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react-taro'
 | \--nutui-countup-lr-margin | 每个数字的margin | `0` |
 | \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` |
 | \--nutui-countup-color | 每个数字块的字色 | `$color-title` |
+| \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` |
diff --git a/src/packages/animatingnumbers/doc.zh-TW.md b/src/packages/animatingnumbers/doc.zh-TW.md
@@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react'
 | \--nutui-countup-lr-margin | 每個數字的margin | `0` |
 | \--nutui-countup-bg-color | 每個數字塊的背景色 | `inherit` |
 | \--nutui-countup-color | 每個數字塊的字色 | `$color-title` |
+| \--nutui-countup-separator-color | 分隔符的字體顏色 | `$color-title` |
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -2291,6 +2291,10 @@ $countup-border-radius: var(--nutui-countup-border-radius, 4px) !default;
 $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default;
 $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default;
 $countup-color: var(--nutui-countup-color, $color-title) !default;
+$countup-separator-color: var(
+  --nutui-countup-separator-color,
+  $color-title
+) !default;
 
 // layout（✅）
 $row-content-color: var(--nutui-row-content-color, #fff) !default;