fix: en (#236)

[Doc] add Advanced components english document

docs/examples-docs/en-US/cell-swipe.md

@@ -14,11 +14,11 @@ Vue.component(CellSwipe.name, CellSwipe);
 :::demo Basic Usage
 ```html
 <van-cell-swipe :right-width="65" :left-width="65">
-  <span slot="left">选择</span>
+  <span slot="left">Select</span>
   <van-cell-group>
-    <van-cell title="单元格1" value="单元格1内容"></van-cell>
+    <van-cell title="Cell" value="Cell Content"></van-cell>
   </van-cell-group>
-  <span slot="right">删除</span>
+  <span slot="right">Delete/span>
 </van-cell-swipe>
 ```
 :::
@@ -27,13 +27,13 @@ Vue.component(CellSwipe.name, CellSwipe);
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
+| left-width | Width of the left scrollable area | `Number` | `0` | - |
-| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
+| right-width | Width of the right scrollable area | `Number` | `0` | - |
 
 ### Slot
 
 | name | Description |
 |-----------|-----------|
-| - | 自定义显示内容 |
+| - | custom content |
-| left | 左侧滑动内容 |
+| left | content of left scrollable area |
-| right | 右侧滑动内容 |
+| right | content of right scrollabe area |

docs/examples-docs/en-US/switch-cell.md

@@ -1,6 +1,6 @@
 ## SwitchCell
 
-`SwitchCell`组件是对`Switch`和`Cell`组件的封装
+`SwitchCell` component is an encapsulation of `Switch` and `Cell`.
 
 <script>
 export default {
@@ -42,9 +42,9 @@ export default {
 :::
 
 #### Disabled
-通过`disabled`属性可以将组件设置为禁用状态
+use `disabled` property to disable the component
 
-:::demo 禁用状态
+:::demo Disabled component
 ```html
 <van-cell-group>
   <van-switch-cell v-model="checked" :disabled="true" title="标题" />
@@ -53,9 +53,9 @@ export default {
 :::
 
 #### Loading
-通过`loading`属性可以将组件设置为加载状态
+use `loading` property to keep component in loading state
 
-:::demo 加载状态
+:::demo Component in loading
 ```html
 <van-cell-group>
   <van-switch-cell v-model="checked" :loading="true" title="标题" />
@@ -67,13 +67,13 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 开关状态 | `Boolean` | - | - |
+| v-model | on-off state of the switch | `Boolean` | - | - |
-| title | 左侧标题 |  `String` | `''` | - |
+| title | the leftside title |  `String` | `''` | - |
-| loading | 是否为加载状态 |  `Boolean` | `false` | - |
+| loading | whether the component is in loading state |  `Boolean` | `false` | - |
-| disabled | 是否为禁用状态 |  `Boolean` | `false` | - |
+| disabled | whether to disable the component |  `Boolean` | `false` | - |
 
 ### Event
 
 | Event | Description | Attribute |
 |-----------|-----------|-----------|
-| change | 开关状态切换回调 | checked: 是否选中开关 |
+| change | triggered when the on-off state is changed | checked: switch is on or not |

docs/examples-docs/en-US/tree-select.md

@@ -4,57 +4,57 @@ export default {
   data() {
     return {
       items: [{
-        text: '所有城市',
+        text: 'All Cities',
         children: [{
-          text: '杭州',
+          text: 'Hang Zhou',
           id: 1001
         }, {
-          text: '温州',
+          text: 'Wen Zhou',
           id: 1002
         }, {
-          text: '海南',
+          text: 'Hai Nan',
           id: 1100
         }, {
-          text: '宁波',
+          text: 'Ning Bo',
           id: 1003
         }, {
-          text: '义乌',
+          text: 'Yi Wu',
           id: 1004
         }, {
-          text: '无锡',
+          text: 'Wu Xi',
           id: 1011
         }, {
-          text: '常州',
+          text: 'Chang Zhou',
           id: 1012
         }, {
-          text: '大连',
+          text: 'Da Lian',
           id: 1031
         }, {
-          text: '诸暨',
+          text: 'Zhu Ji',
           id: 1005
         }]
       }, {
-        text: '浙江',
+        text: 'Zhe Jiang',
         children: [{
-          text: '杭州',
+          text: 'Hang Zhou',
           id: 1001
         }, {
-          text: '温州',
+          text: 'Wen Zhou',
           id: 1002
         }, {
-          text: '宁波',
+          text: 'Ning Bo',
           id: 1003
         }, {
-          text: '义乌',
+          text: 'Yi Wu',
           id: 1004
         }]
       }, {
-        text: '江苏',
+        text: 'Jiang Su',
         children: [{
-          text: '无锡',
+          text: 'Wu Xi',
           id: 1011
         }, {
-          text: '常州',
+          text: 'Chang Zhou',
           id: 1012
         }]
       }],
@@ -103,9 +103,9 @@ export default {
   data() {
     return {
       items: items,
-      // 左侧高亮元素的index
+      // the index of parent item
       mainActiveIndex: 0,
-      // 被选中元素的id
+      // the id of selected item
       activeId: 1001
     };
   },
@@ -124,42 +124,43 @@ export default {
 
 ### API
 
-#### 传入参数
+#### Properties
 
 | Attribute | Description | Type | Default | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
-| items | 分类显示所需的数据，具体数据结构可看 数据结构 |  Array | [] | - |
+| items | Required datasets for the component, see Data Structure for detail. |  Array | [] | - |
-| mainActiveIndex | 左侧导航高亮的索引 |  Number | 0 | - |
+| mainActiveIndex | The index of selected parent node |  Number | 0 | - |
-| activeId | 右侧选择项，高亮的数据id |  Number | 0 | - |
+| activeId | Id of selected item |  Number | 0 | - |
 
 #### Event
 | Event | Description | Attribute |
 |-----------|-----------|-----------|
-| navclick | 左侧导航点击时，触发的事件 |  index：被点击的导航的索引 |
+| navclick | triggered when parent node is selected |  index: index of selected parent |
-| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |
+| itemclick | triggered when item is selected | data: selected item |
 
 ### Data Structure
-#### items 分类显示所需数据的数据结构
+#### Data Structure of `items` 
-`items` 整体为一个数组，数组内包含一系列描述分类的 object。
+`items` should be an array contains specified tree objects.
+
+In every tree object, `text` property defines the name, `id` stands for the unique key while the `children` contains sub-tree objects.
 
-每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项
 ```javascript
 [
   {
-    // 导航名称
+    // name of the parent node
-    text: '所有城市',
+    text: 'All Cities',
-    // 该导航下所有的可选项
+    // leaves of this parent node
     children: [
       {
-        // 可选项的名称
+        // name of the leaf node
-        text: '温州',
+        text: 'Washington',
-        // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
+        // id of the leaf node, component highlights leaf node by comparing the activeId with this.
         id: 1002
       },
       {
-        // 可选项的名称
+        // name of the leaf node
-        text: '杭州',
+        text: 'Baltimore',
-        // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
+        // id of the leaf node, component highlights leaf node by comparing the activeId with this.
         id: 1001
       }
     ]