docs(example): optimize example

varletjs · Apr 25, 2021 · d1006ac · d1006ac
1 parent b156587
commit d1006ac
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 62 deletions.
diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md
@@ -46,16 +46,6 @@ The action is displayed through the `show-action` attribute. The action is the p
 
 ## Progress circle
 
-### Size
-
-Change the size of the progress bar through the `size` attribute.
-
-```html
-<var-progress :value="30" line-width="3" mode="circle" />
-<var-progress :value="50" line-width="3" size="56" mode="circle" />
-<var-progress :value="70" line-width="3" size="72" mode="circle" />
-```
-
 ### Custom Style
 
 ```html
@@ -67,23 +57,15 @@ Change the size of the progress bar through the `size` attribute.
   color="purple"
   track-color="#dec3e6"
 />
-<var-progress
-  :value="value"
-  line-width="5"
-  :size="56"
-  mode="circle"
-  :rotate="90"
-  show-action
-/>
-<var-progress
-  :value="50"
-  line-width="12"
-  :size="56"
-  mode="circle"
-  :show-track="false"
-/>
 ```
 
+### Hide Track
+
+Use `show-track` prop to hide track.
+
+```html
+<var-progress :value="50" :size="56" mode="circle" :show-track="false" />
+```
 ## API
 
 ### Props

diff --git a/packages/varlet-ui/src/progress/docs/zh-CN.md b/packages/varlet-ui/src/progress/docs/zh-CN.md
@@ -46,16 +46,6 @@ createApp().use(Progress)
 
 ## 环形进度条
 
-### 不同尺寸
-
-通过`size`属性改变进度条大小。
-
-```html
-<var-progress :value="30" line-width="3" mode="circle" />
-<var-progress :value="50" line-width="3" size="56" mode="circle" />
-<var-progress :value="70" line-width="3" size="72" mode="circle" />
-```
-
 ### 自定义样式
 
 ```html
@@ -67,23 +57,16 @@ createApp().use(Progress)
   color="purple" 
   track-color="#dec3e6" 
 />
-<var-progress 
-  :value="value" 
-  line-width="5" 
-  :size="56"
-  mode="circle" 
-  :rotate="90" 
-  show-action 
-/>
-<var-progress 
-  :value="50" 
-  line-width="12" 
-  :size="56" 
-  mode="circle" 
-  :show-track="false" 
-/>
 ```
 
+
+### 隐藏轨道
+
+通过`show-track`属性隐藏 track。
+
+```html
+<var-progress :value="50" :size="56" mode="circle" :show-track="false" />
+```
 ## API
 
 ### 属性

diff --git a/packages/varlet-ui/src/progress/example/index.vue b/packages/varlet-ui/src/progress/example/index.vue
@@ -23,20 +23,16 @@
 
     <h4>{{ pack.circle }}</h4>
     <div>
-      <app-type>{{ pack.size }}</app-type>
+      <app-type>{{ pack.style }}</app-type>
       <div class="progress-demo__circle">
-        <var-progress :value="30" line-width="3" mode="circle" />
-        <var-progress :value="50" line-width="3" :size="56" mode="circle" />
-        <var-progress :value="70" line-width="3" :size="72" mode="circle" />
+        <var-progress :value="30" line-width="5" :size="56" mode="circle" color="purple" track-color="#dec3e6" />
       </div>
     </div>
 
     <div>
-      <app-type>{{ pack.style }}</app-type>
+      <app-type>{{ pack.hideTrack }}</app-type>
       <div class="progress-demo__circle">
-        <var-progress :value="30" line-width="5" :size="56" mode="circle" color="purple" track-color="#dec3e6" />
-        <var-progress :value="value" line-width="5" :size="56" mode="circle" :rotate="90" show-action />
-        <var-progress :value="50" line-width="12" :size="56" mode="circle" :show-track="false" />
+        <var-progress :value="50" :size="56" mode="circle" :show-track="false" />
       </div>
     </div>
   </div>

diff --git a/packages/varlet-ui/src/progress/example/locale/en-US.ts b/packages/varlet-ui/src/progress/example/locale/en-US.ts
@@ -4,5 +4,5 @@ export default {
   basicUsage: 'Basic Usage',
   style: 'Custom Style',
   showLabel: 'Show Action',
-  size: 'Size',
+  hideTrack: 'Hide Track',
 }
diff --git a/packages/varlet-ui/src/progress/example/locale/zh-CN.ts b/packages/varlet-ui/src/progress/example/locale/zh-CN.ts
@@ -4,5 +4,5 @@ export default {
   basicUsage: '基本使用',
   style: '自定义样式',
   showLabel: '显示标签',
-  size: '不同尺寸',
+  hideTrack: '隐藏轨道',
 }
diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue
@@ -106,7 +106,6 @@
     </div>
     <var-form-details
       :error-message="errorMessage"
-      :style="{ marginLeft: thumbSize / 2 + 'px' }"
       class="var-slider__form"
       var-slider-cover
     />

diff --git a/packages/varlet-ui/src/slider/slider.less b/packages/varlet-ui/src/slider/slider.less
@@ -125,6 +125,6 @@
   }
 
   &__form[var-slider-cover] {
-    margin: 0 0 0 6px;
+    margin: 0;
   }
 }