docs(ui/progress): 优化progress example

affects: @varlet/ui
varletjs · Apr 26, 2021 · c82f83f · c82f83f
1 parent 170cd01
commit c82f83f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md
@@ -23,16 +23,6 @@ Set the current progress through the `value` attribute.
 <var-progress :value="100" />
 ```
 
-### Custom Style
-
-Set the line width, progress bar color, track color and ripple loading effect through the attributes of `line-width`, `color`, `track-color` and `ripple`.
-
-```html
-<var-progress :value="30" line-width="8" color="#ff9800" />
-<var-progress :value="60" line-width="8" color="#ff9800" track-color="#f5cb90" />
-<var-progress :value="80" ripple line-width="8" color="#ff9800" track-color="#f5cb90" />
-```
-
 ### Show Label
 
 The label is displayed through the `label` attribute. The label is the percentage of progress by default. You can use the slot to insert custom content.
@@ -43,6 +33,16 @@ The label is displayed through the `label` attribute. The label is the percentag
 <var-progress label :value="100">success</var-progress>
 ```
 
+### Custom Style
+
+Set the line width, progress bar color, track color and ripple loading effect through the attributes of `line-width`, `color`, `track-color` and `ripple`.
+
+```html
+<var-progress :value="30" line-width="8" color="#ff9800" />
+<var-progress :value="60" line-width="8" color="#ff9800" track-color="#f5cb90" />
+<var-progress :value="80" ripple line-width="8" color="#ff9800" track-color="#f5cb90" />
+```
+
 ### Progress circle
 
 ```html

diff --git a/packages/varlet-ui/src/progress/docs/zh-CN.md b/packages/varlet-ui/src/progress/docs/zh-CN.md
@@ -23,16 +23,6 @@ createApp().use(Progress)
 <var-progress :value="100" />
 ```
 
-### 自定义样式
-
-通过`line-width`、`color`、`track-color`、`ripple` 属性设置线宽、进度条颜色、轨道颜色、水波纹加载效果。
-
-```html
-<var-progress :value="30" line-width="8" color="#ff9800" />
-<var-progress :value="60" line-width="8" color="#ff9800" track-color="#f5cb90" />
-<var-progress :value="80" ripple line-width="8" color="#ff9800" track-color="#f5cb90" />
-```
-
 ### 显示标签
 
 通过`label`属性将label显示，label默认为进度的百分比，可以使用插槽插入自定义内容。
@@ -43,6 +33,16 @@ createApp().use(Progress)
 <var-progress label :value="100">success</var-progress>
 ```
 
+### 自定义样式
+
+通过`line-width`、`color`、`track-color`、`ripple` 属性设置线宽、进度条颜色、轨道颜色、水波纹加载效果。
+
+```html
+<var-progress :value="30" line-width="8" color="#ff9800" />
+<var-progress :value="60" line-width="8" color="#ff9800" track-color="#f5cb90" />
+<var-progress :value="80" ripple line-width="8" color="#ff9800" track-color="#f5cb90" />
+```
+
 ### 环形进度条
 
 ```html

diff --git a/packages/varlet-ui/src/progress/example/index.vue b/packages/varlet-ui/src/progress/example/index.vue
@@ -1,18 +1,13 @@
 <template>
   <div class="progress-demo">
     <div class="space"></div>
+
     <div class="progress-demo__basic">
       <app-type>{{ pack.basicUsage }}</app-type>
       <var-progress :value="20" />
       <var-progress :value="value" />
       <var-progress :value="100" />
     </div>
-    <div class="progress-demo__style">
-      <app-type>{{ pack.style }}</app-type>
-      <var-progress :value="30" line-width="8" color="#ff9800" />
-      <var-progress :value="60" line-width="8" color="#ff9800" track-color="#f5cb90" />
-      <var-progress :value="80" ripple line-width="8" color="#ff9800" track-color="#f5cb90" />
-    </div>
 
     <div class="progress-demo__label">
       <app-type>{{ pack.showLabel }}</app-type>
@@ -21,6 +16,13 @@
       <var-progress :value="100" label>success</var-progress>
     </div>
 
+    <div class="progress-demo__style">
+      <app-type>{{ pack.style }}</app-type>
+      <var-progress :value="30" line-width="8" color="#ff9800" />
+      <var-progress :value="60" line-width="8" color="#ff9800" track-color="#f5cb90" />
+      <var-progress :value="80" ripple line-width="8" color="#ff9800" track-color="#f5cb90" />
+    </div>
+
     <app-type>{{ pack.circle }}</app-type>
     <div class="progress-demo__circle">
       <var-progress mode="circle" :value="30" line-width="5" :size="56" />
@@ -29,6 +31,7 @@
       <div class="space"></div>
       <var-progress mode="circle" label :value="100" line-width="5" :size="56" />
     </div>
+
     <app-type>{{ pack.hideTrack }}</app-type>
     <div class="progress-demo__circle">
       <var-progress mode="circle" :value="50" :size="56" :track="false" />
@@ -89,11 +92,11 @@ export default defineComponent({
   .progress-demo__label,
   .progress-demo__custom {
     .var-progress {
+      margin: 12px 0;
+
       &:nth-child(2) {
         margin-top: 0;
       }
-
-      margin: 12px 0;
     }
   }