feat(slider): docs and i18n

varletjs · Mar 12, 2021 · 3aab17b · 3aab17b
1 parent 94a6db3
commit 3aab17b
Show file tree

Hide file tree

Showing 12 changed files with 439 additions and 165 deletions.
diff --git a/packages/varlet-ui/src/app-bar/appBar.less b/packages/varlet-ui/src/app-bar/appBar.less
@@ -1,7 +1,7 @@
 .var-app-bar {
   height: 50px;
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
   align-items: center;
 
   &__title {

diff --git a/packages/varlet-ui/src/countdown/docs/en-US.md b/packages/varlet-ui/src/countdown/docs/en-US.md
@@ -1,47 +1,34 @@
 # Countdown
 
-### Introduce
+### Intro
 
 For real-time display of countdown values, support millisecond precision.
 
-### install
+### Install
 
 ```js
 import { Countdown } from '@varlet/ui'
 
-export default defineComponent({
-  components: {
-    [Countdown.name]: Countdown
-  }
-})
+createApp().use(Countdown)
 ```
 
 ### Basic Usage
 
 Use `time` to set countdown time(ms).
 
 ```html
-<tempalte>
   <var-countdown :time="time" />
-</tempalte>
-
-<script>
-  import { defineComponent, ref } from 'vue'
-  import { Countdown } from '@varlet/ui'
-
-  export default defineComponent({
-    components: {
-      [Countdown.name]: Countdown
-    },
+```
+```javascript
+  export default {
     setup() {
       const time = ref(30 * 60 * 60 * 1000)
 
       return {
         time
       }
     }
-  })
-</script>
+  }
 ```
 ### Custom Format
 
@@ -80,7 +67,6 @@ Use `slot` to set custom countdown style.
 Use `ref` to get countdown instance, you can call the `start`, `pause`, and `reset` methods.
 
 ```html
-<template>
   <var-countdown
     time="3000"
     ref="countdown"
@@ -94,17 +80,9 @@ Use `ref` to get countdown instance, you can call the `start`, `pause`, and `res
     <var-button @click="$refs.countdown.pause()">pause</var-button>
     <var-button @click="$refs.countdown.reset()">reset</var-button>
   </div>
-</template>
-
-<script>
-  import { defineComponent, ref } from 'vue'
-  import { Countdown, Snackbar, Button } from '@varlet/ui'
-
-  export default defineComponent({
-    components: {
-      [Countdown.name]: Countdown,
-      [Button.name]: Button,
-    },
+```
+```javascript
+  export default {
     setup() {
       const countdown = ref(null)
 
@@ -121,24 +99,23 @@ Use `ref` to get countdown instance, you can call the `start`, `pause`, and `res
         end,
         change,
       }
-    },
-  })
-</script>
-<style scoped>
+    }
+  }
+```
+```css
   .btn-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 10px;
   }
-</style>
 ```
 
 ## API
 
 ### Props
 
-| Attribute | Description | Type | Default |
+| prop | Description | Type | Default |
 | ----- | -------------- | -------- | ---------- |
 | time | Total time(ms)| _number_ ｜ _string_ | `0` |
 | format | Time format | _string_ | `HH:mm:ss` |
@@ -157,10 +134,10 @@ Use `ref` to get countdown instance, you can call the `start`, `pause`, and `res
 
 ### Events
 
-| Event | Description | Parameters |
+| Event | Description | arguments |
 | ----- | -------------- | -------- |
-| end | Emitted after countdown end | - |
-| change | Emitted after countdown change | `timeData: TimeData` |
+| end | Emitted after countdown ended | - |
+| change | Emitted after countdown changed | `timeData: TimeData` |
 
 ### Slots
 
@@ -182,7 +159,7 @@ Use `ref` to get countdown instance, you can call the `start`, `pause`, and `res
 ### Methods
 Use ref to get CountDown instance and call instance methods.
 
-| Name | Description	 | Attribute |
+| Name | Description	 | arguments |
 | ---- | ------- | -------- |
 | start | Start countdown	 | - |
 | pause | Pause countdown	 | - |

diff --git a/packages/varlet-ui/src/countdown/docs/zh-CN.md b/packages/varlet-ui/src/countdown/docs/zh-CN.md
@@ -9,39 +9,26 @@
 ```js
 import { Countdown } from '@varlet/ui'
 
-export default defineComponent({
-  components: {
-    [Countdown.name]: Countdown
-  }
-})
+createApp().use(Countdown)
 ```
 
 ### 基本使用
 
 `time` 属性表示倒计时总时长，单位为毫秒。
 
 ```html
-<tempalte>
   <var-countdown :time="time" />
-</tempalte>
-
-<script>
-  import { defineComponent, ref } from 'vue'
-  import { Countdown } from '@varlet/ui'
-
-  export default defineComponent({
-    components: {
-      [Countdown.name]: Countdown
-    },
+```
+```javascript
+  export default {
     setup() {
       const time = ref(30 * 60 * 60 * 1000)
 
       return {
         time
       }
     }
-  })
-</script>
+  }
 ```
 ### 自定义格式
 
@@ -80,7 +67,6 @@ export default defineComponent({
 通过 ref 获取到组件实例后，可以调用 `start`、`pause`、`reset` 方法。
 
 ```html
-<template>
   <var-countdown
     time="3000"
     ref="countdown"
@@ -90,21 +76,13 @@ export default defineComponent({
     @change="change"
   />
   <div class="btn-container">
-    <var-button type="primary" @click="$refs.countdown.start()">开始</var-button>
-    <var-button @click="$refs.countdown.pause()">暂停</var-button>
-    <var-button @click="$refs.countdown.reset()">重置</var-button>
+    <var-button type="primary" @click="$refs.countdown.start()">start</var-button>
+    <var-button @click="$refs.countdown.pause()">pause</var-button>
+    <var-button @click="$refs.countdown.reset()">reset</var-button>
   </div>
-</template>
-
-<script>
-  import { defineComponent, ref } from 'vue'
-  import { Countdown, Snackbar, Button } from '@varlet/ui'
-
-  export default defineComponent({
-    components: {
-      [Countdown.name]: Countdown,
-      [Button.name]: Button,
-    },
+```
+```javascript
+  export default {
     setup() {
       const countdown = ref(null)
 
@@ -121,17 +99,16 @@ export default defineComponent({
         end,
         change,
       }
-    },
-  })
-</script>
-<style scoped>
+    }
+  }
+```
+```css
   .btn-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 10px;
   }
-</style>
 ```
 
 ## API

diff --git a/packages/varlet-ui/src/loading/docs/en-US.md b/packages/varlet-ui/src/loading/docs/en-US.md
@@ -30,7 +30,7 @@ createApp().use(Loading)
 
 ### Props
 
-| Attribute | Description                                    | Type     | Default        |
+| prop | Description                                    | Type     | Default        |
 | --------- | ---------------------------------------------- | -------- | -------------- |
 | color     | Loading color                                  | _string_ | `currentColor` |
 | type      | Can be set to `wave` `cube` `rect` `disappear` | _string_ | `wave`         |