style(circleprogress): docs 优化，修订 css 变量 (#1699)

Co-authored-by: oasis-cloud <[email protected]>
jdf2e · Nov 30, 2023 · 8b9f1f2 · 8b9f1f2
1 parent fe9a096
commit 8b9f1f2
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 51 deletions.
diff --git a/src/packages/circleprogress/demo.scss b/src/packages/circleprogress/demo.scss
@@ -1,25 +1,11 @@
 .demo-circleprogress {
   min-height: 100vh;
-}
-.demo__btn {
-  text-align: center;
-  width: 100%;
-  height: 50px;
-  border-top: 1px solid rgba(234, 240, 251, 1);
-  padding-top: 6px;
-  background: rgba(255, 255, 255, 1);
-  .nut-button {
-    margin-right: 10px;
-  }
-}
-.demo-btn {
-  .nut-button {
-    margin-right: 10px;
+
+  .demo-btn {
+    margin-top: -16px;
+
+    .nut-button {
+      margin-right: 10px;
+    }
   }
 }
-.demo__piece {
-  display: flex;
-  justify-content: center;
-  background: rgba(255, 255, 255, 1);
-  padding: 10px 0;
-}
diff --git a/src/packages/circleprogress/demo.taro.tsx b/src/packages/circleprogress/demo.taro.tsx
@@ -71,7 +71,7 @@ const CircleProgressDemo = () => {
 
   const gradientColor = {
     '0%': '#ff404f',
-    '100%': '#fa2c19',
+    '100%': '#1988fa',
   }
 
   return (
@@ -90,12 +90,13 @@ const CircleProgressDemo = () => {
 
         <h2>{translated['67eacf7f']}</h2>
         <Cell style={{ justifyContent: 'center' }}>
-          <CircleProgress percent={50} strokeWidth={10} />
+          <CircleProgress percent={50} strokeWidth={2} />
+          <CircleProgress percent={60} strokeWidth={10} background="#e5e9f2" />
         </Cell>
 
         <h2>{translated['3fee7d50']}</h2>
         <Cell style={{ justifyContent: 'center' }}>
-          <CircleProgress percent={50} color="#fa2c19">
+          <CircleProgress percent={50} color="#1988fa">
             50%
           </CircleProgress>
           <CircleProgress percent={100} color={gradientColor}>
@@ -114,7 +115,7 @@ const CircleProgressDemo = () => {
         <Cell style={{ justifyContent: 'center' }}>
           <CircleProgress percent={50} radius={60}>
             <div>3000</div>
-            <div style={{ fontSize: '12px', color: 'var(--nutui-gray-2)' }}>
+            <div style={{ fontSize: '12px', color: 'var(--nutui-black-10)' }}>
               步
             </div>
           </CircleProgress>
@@ -124,11 +125,15 @@ const CircleProgressDemo = () => {
         <Cell style={{ justifyContent: 'center' }}>
           <CircleProgress percent={percent}>{percent}%</CircleProgress>
         </Cell>
-        <Cell className="demo__btn" style={{ justifyContent: 'center' }}>
-          <Button type="primary" onClick={setReduceVal}>
+        <Cell
+          className="demo-btn"
+          radius="0 0 6px 6px"
+          style={{ justifyContent: 'center' }}
+        >
+          <Button type="primary" size="small" onClick={setReduceVal}>
             {translated['43c9f2ba']}
           </Button>
-          <Button type="primary" onClick={setAddVal}>
+          <Button type="primary" size="small" onClick={setAddVal}>
             {translated.bce53fe7}
           </Button>
         </Cell>

diff --git a/src/packages/circleprogress/demo.tsx b/src/packages/circleprogress/demo.tsx
@@ -70,13 +70,13 @@ const CircleProgressDemo = () => {
   }
 
   const gradientColor = {
-    '0%': '#FF5E5E',
-    '100%': '#FFA062',
+    '0%': 'var(--nutui-color-primary-stop-1)',
+    '100%': 'var(--nutui-color-primary-stop-2)',
   }
 
   return (
     <>
-      <div className="demo">
+      <div className="demo demo-circleprogress">
         <h2>{translated['84aa6bce']}</h2>
         <Cell style={{ justifyContent: 'center' }}>
           <CircleProgress percent={20} />
@@ -110,7 +110,7 @@ const CircleProgressDemo = () => {
         <Cell style={{ justifyContent: 'center' }}>
           <CircleProgress percent={50} radius={60}>
             <div>3000</div>
-            <div style={{ fontSize: '12px', color: 'var(--nutui-gray-2)' }}>
+            <div style={{ fontSize: '12px', color: 'var(--nutui-black-10)' }}>
               步
             </div>
           </CircleProgress>
@@ -120,11 +120,15 @@ const CircleProgressDemo = () => {
         <Cell style={{ justifyContent: 'center' }}>
           <CircleProgress percent={percent}>{percent}%</CircleProgress>
         </Cell>
-        <Cell className="demo-btn" style={{ justifyContent: 'center' }}>
-          <Button type="primary" onClick={setReduceVal}>
+        <Cell
+          className="demo-btn"
+          radius="0 0 6px 6px"
+          style={{ justifyContent: 'center' }}
+        >
+          <Button type="primary" size="small" onClick={setReduceVal}>
             {translated['43c9f2ba']}
           </Button>
-          <Button type="primary" onClick={setAddVal}>
+          <Button type="primary" size="small" onClick={setAddVal}>
             {translated.bce53fe7}
           </Button>
         </Cell>

diff --git a/src/packages/circleprogress/doc.en-US.md b/src/packages/circleprogress/doc.en-US.md
@@ -120,7 +120,7 @@ const App = () => {
       <CircleProgress percent={50} radius={60}>
         <> 
           <div>3000</div>
-          <div style={{ fontSize: '12px', color: 'var(--nutui-gray-2)' }}>步</div>
+          <div style={{ fontSize: '12px', color: 'var(--nutui-black-10)' }}>步</div>
         </>
       </CircleProgress>
     </>
@@ -169,10 +169,10 @@ const App = () => {
         <CircleProgress percent={percent}>{percent}%</CircleProgress>
       </div>
       <div className="demo__btn">
-        <Button type="primary" onClick={setReduceVal} style={{ marginRight: '10px' }}>
+        <Button type="primary" size="small" onClick={setReduceVal} style={{ marginRight: '10px' }}>
           reduce
         </Button>
-        <Button type="primary" onClick={setAddVal}>
+        <Button type="primary" size="small" onClick={setAddVal}>
           add
         </Button>
       </div>
@@ -208,5 +208,5 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | \--nutui-circleprogress-primary-color | The color of the filled part of the circular progress bar | `$color-primary` |
 | \--nutui-circleprogress-path-color | The color of the circular progress bar track | `#e5e9f2` |
-| \--nutui-circleprogress-text-color | The color of the track content area of the circular progress bar | `$title-color` |
+| \--nutui-circleprogress-text-color | The color of the track content area of the circular progress bar | `$color-title` |
 | \--nutui-circleprogress-text-size | The size of the track content area of the circular progress bar | `$font-size-large` |
diff --git a/src/packages/circleprogress/doc.md b/src/packages/circleprogress/doc.md
@@ -120,7 +120,7 @@ const App = () => {
       <CircleProgress percent={50} radius={60}>
         <> 
           <div>3000</div>
-          <div style={{ fontSize: '12px', color: 'var(--nutui-gray-2)' }}>步</div>
+          <div style={{ fontSize: '12px', color: 'var(--nutui-black-10)' }}>步</div>
         </>
       </CircleProgress>
     </>
@@ -162,10 +162,10 @@ const App = () => {
         <CircleProgress percent={percent}>{percent}%</CircleProgress>
       </div>
       <div className="demo__btn">
-        <Button type="primary" onClick={setReduceVal} style={{ marginRight: '10px' }}>
+        <Button type="primary" size="small" onClick={setReduceVal} style={{ marginRight: '10px' }}>
           减少
         </Button>
-        <Button type="primary" onClick={setAddVal}>
+        <Button type="primary" size="small" onClick={setAddVal}>
           增加
         </Button>
       </div>
@@ -201,5 +201,5 @@ export default App;
 | --- | --- | --- |
 | \--nutui-circleprogress-primary-color | 环形进度条填充部分的颜色 | `$color-primary` |
 | \--nutui-circleprogress-path-color | 环形进度条轨道的颜色 | `#e5e9f2` |
-| \--nutui-circleprogress-text-color | 环形进度条轨道内容区的颜色 | `$title-color` |
+| \--nutui-circleprogress-text-color | 环形进度条轨道内容区的颜色 | `$color-title` |
 | \--nutui-circleprogress-text-size | 环形进度条轨道内容区的大小 | `$font-size-large` |
diff --git a/src/packages/circleprogress/doc.taro.md b/src/packages/circleprogress/doc.taro.md
@@ -119,7 +119,7 @@ const App = () => {
     <>
       <CircleProgress percent={50} radius={60}>
         <div>3000</div>
-        <div style={{ fontSize: '12px', color: 'var(--nutui-gray-2)' }}>
+        <div style={{ fontSize: '12px', color: 'var(--nutui-black-10)' }}>
           步
         </div>
       </CircleProgress>
@@ -162,10 +162,10 @@ const App = () => {
         <CircleProgress percent={percent}>{percent}%</CircleProgress>
       </div>
       <div className="demo__btn">
-        <Button type="primary" onClick={setReduceVal}>
+        <Button type="primary" size="small" onClick={setReduceVal}>
           减少
         </Button>
-        <Button type="primary" onClick={setAddVal}>
+        <Button type="primary" size="small" onClick={setAddVal}>
           增加
         </Button>
       </div>
@@ -201,5 +201,5 @@ export default App;
 | --- | --- | --- |
 | \--nutui-circleprogress-primary-color | 环形进度条填充部分的颜色 | `$color-primary` |
 | \--nutui-circleprogress-path-color | 环形进度条轨道的颜色 | `#e5e9f2` |
-| \--nutui-circleprogress-text-color | 环形进度条轨道内容区的颜色 | `$title-color` |
+| \--nutui-circleprogress-text-color | 环形进度条轨道内容区的颜色 | `$color-title` |
 | \--nutui-circleprogress-text-size | 环形进度条轨道内容区的大小 | `$font-size-large` |
diff --git a/src/packages/circleprogress/doc.zh-TW.md b/src/packages/circleprogress/doc.zh-TW.md
@@ -120,7 +120,7 @@ const App = () => {
       <CircleProgress percent={50} radius={60}>
         <> 
           <div>3000</div>
-          <div style={{ fontSize: '12px', color: 'var(--nutui-gray-2)' }}>步</div>
+          <div style={{ fontSize: '12px', color: 'var(--nutui-black-10)' }}>步</div>
         </>
       </CircleProgress>
     </>
@@ -162,10 +162,10 @@ const App = () => {
         <CircleProgress percent={percent}>{percent}%</CircleProgress>
       </div>
       <div className="demo__btn">
-        <Button type="primary" onClick={setReduceVal} style={{ marginRight: '10px' }}>
+        <Button type="primary" size="small" onClick={setReduceVal} style={{ marginRight: '10px' }}>
           減少
         </Button>
-        <Button type="primary" onClick={setAddVal}>
+        <Button type="primary" size="small" onClick={setAddVal}>
           增加
         </Button>
       </div>
@@ -201,5 +201,5 @@ export default App;
 | --- | --- | --- |
 | \--nutui-circleprogress-primary-color | 環形進度條填充部分的顏色 | `$color-primary` |
 | \--nutui-circleprogress-path-color | 環形進度條軌道的顏色 | `#e5e9f2` |
-| \--nutui-circleprogress-text-color | 環形進度條軌道內容區的顏色 | `$title-color` |
+| \--nutui-circleprogress-text-color | 環形進度條軌道內容區的顏色 | `$color-title` |
 | \--nutui-circleprogress-text-size | 環形進度條軌道內容區的大小 | `$font-size-large` |