feat(docs): 添加组件描述

jd-opensource · Aug 23, 2018 · 1105b2f · 1105b2f
1 parent 8cef6a8
commit 1105b2f
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 56 deletions.
diff --git a/docs/markdown/action-sheet.md b/docs/markdown/action-sheet.md
@@ -1,7 +1,9 @@
-# ActionSheet 上拉菜单
+# ActionSheet 动作面板
 
 ---
 
+该组件提供了一种多端统一的 `动作面板` 样式与 `IOS` 对齐 在页面上的层级为 `1010`
+
 ## 使用指南
 
 在 Taro 文件中引入组件

diff --git a/docs/markdown/activity-indicator.md b/docs/markdown/activity-indicator.md
@@ -2,6 +2,8 @@
 
 ---
 
+该组件提供一个加载等待元素,也就是Loading组件
+
 ## 使用指南
 
 在 Taro 文件中引入组件

diff --git a/docs/markdown/card.md b/docs/markdown/card.md
@@ -1,7 +1,9 @@
-# Card 浮动布局
+# Card 卡片
 
 ---
 
+提供常见的卡片样式
+
 ## 使用指南
 
 在 Taro 文件中引入组件

diff --git a/docs/markdown/float-layout.md b/docs/markdown/float-layout.md
@@ -2,6 +2,8 @@
 
 ---
 
+提供 `浮动布局` 的功能,在页面上的层级为 `810`
+
 ## 使用指南
 
 在 Taro 文件中引入组件

diff --git a/docs/markdown/grid.md b/docs/markdown/grid.md
@@ -2,14 +2,16 @@
 
 ---
 
+提供在移动端常见的 `宫格` 布局,帮助快速实现宫格效果
+
 ## 使用指南
 
 在 Taro 文件中引入组件
 
 :::demo
 
 ```js
-import { AtGrid } from "taro-ui";
+import { AtGrid } from "taro-ui"
 ```
 
 :::
@@ -92,7 +94,7 @@ import { AtGrid } from "taro-ui";
 
 | 参数      | 说明               | 类型                                | 可选值 | 默认值  |
 | --------- | ------------------ | ----------------------------------- | ------ | ------- |
-| data      | 宫格布局数据源     | Array[{'{ icon , value , image }'}] | -      | -       |
+| data      | 宫格布局数据源     | [{'{ icon? , value? , image? }'}]   | -      | -       |
 | mode      | 元素的标题         | String                              | -      | -       |
 | columnNum | 每一列有多少个     | Number                              | -      | -       |
-| onClick   | 点击宫格触发的时间 | (item: Object, index: number): void | -      | `false` |
+| onClick   | 点击宫格触发的事件 | (item: object, index: number): void | -      | `false` |
diff --git a/docs/markdown/list.md b/docs/markdown/list.md
@@ -2,14 +2,16 @@
 
 ---
 
+提供常见的 `List` 组件,帮助使用者快速搭建列表
+
 ## 使用指南
 
 在 Taro 文件中引入组件
 
 :::demo
 
 ```js
-import { AtListItem } from "taro-ui"
+import { AtList, AtListItem } from "taro-ui"
 ```
 
 :::
@@ -19,30 +21,59 @@ import { AtListItem } from "taro-ui"
 :::demo
 
 ```html
-<AtListItem title='标题文字'/>
+<AtList>
+  <AtListItem title='标题文字' onClick={this.handleClick} />
+  <AtListItem title='标题文字' arrow='right' />
+  <AtListItem title='标题文字' extraText='详细信息' />
+</AtList>
 ```
 
 :::
 
-## 带箭头的 Item
+## 带描述信息
 
 :::demo
 
 ```html
-<AtListItem title='标题文字' arrow='right' />
+<AtList>
+  <AtListItem title='标题文字' note='描述信息' />
+  <AtListItem title='标题文字' note='描述信息' arrow='right' />
+  <AtListItem
+    arrow='right'
+    note='描述信息'
+    title='标题文字标题文字标题文字标题文字标题文字'
+    extraText='详细信息详细信息详细信息详细信息'
+  />
+</AtList>
 ```
 
 :::
 
-## 带附加信息的 Item
+## 包含图片
 
 :::demo
 
 ```html
-<AtListItem
-  arrow='right'
-  title='标题文字'
-  extraText='详细信息' />
+<AtList>
+  <AtListItem
+    title='标题文字'
+    arrow='right'
+    thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
+  />
+  <AtListItem
+    title='标题文字'
+    note='描述信息'
+    arrow='right'
+    thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
+  />
+  <AtListItem
+    title='标题文字'
+    note='描述信息'
+    extraText='详细信息'
+    arrow='right'
+    thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
+  />
+</AtList>
 ```
 
 :::
@@ -52,49 +83,27 @@ import { AtListItem } from "taro-ui"
 :::demo
 
 ```html
-<AtListItem isSwitch arrow='right' title='标题文字' />
-```
-
-:::
-
-## 带缩略图的 Item
-
-:::demo
-
-```html
-<AtListItem
-  arrow='right'
-  title='标题文字'
-  extraText='详细信息'
-  thumb='http://www.logoquan.com/upload/list/20180421/logoquan15307837419.PNG' />
-```
-
-:::
-
-## 带描述信息的 Item
-
-:::demo
-
-```html
-<AtListItem
-  arrow='right'
-  note='描述信息'
-  title='标题文字'
-  extraText='详细信息'
-  thumb='http://www.logoquan.com/upload/list/20180421/logoquan15307837419.PNG' />
+<AtList>
+  <AtListItem
+    title='标题文字'
+    isSwitch
+    onSwitchChange={this.handleChange}
+  />
+</AtList>
 ```
 
 :::
 
-## AtList 参数
-
-| 参数       | 说明                   | 类型     | 可选值                 | 默认值  |
-| ---------- | ---------------------- | -------- | ---------------------- | ------- |
-| title      | 元素的标题             | String   | -                      | -       |
-| note       | 元素的描述信息         | String   | -                      | -       |
-| thumb      | 元素的主要缩略图       | String   | -                      | -       |
-| arrow      | 箭头的方向             | String   | `right`,`top`,`bottom` | -       |
-| extraText  | 额外信息的文本         | String   | -                      | -       |
-| extraThumb | 额外信息的缩略图       | String   | -                      | -       |
-| isSwitch   | 额外信息是否开关       | Boolean  | -                      | `false` |
-| onClick    | 用户点击元素触发的事件 | Function | -                      | -       |
+## AtListItem 参数
+
+| 参数           | 说明                       | 类型     | 可选值                 | 默认值  |
+| -------------- | -------------------------- | -------- | ---------------------- | ------- |
+| title          | 元素的标题                 | String   | -                      | -       |
+| note           | 元素的描述信息             | String   | -                      | -       |
+| thumb          | 元素的主要缩略图           | String   | -                      | -       |
+| arrow          | 箭头的方向                 | String   | `right`,`top`,`bottom` | -       |
+| extraText      | 额外信息的文本             | String   | -                      | -       |
+| extraThumb     | 额外信息的缩略图           | String   | -                      | -       |
+| isSwitch       | 额外信息是否开关           | Boolean  | -                      | `false` |
+| onClick        | 用户点击元素触发的事件     | Function | -                      | -       |
+| onSwitchChange | 用户点击切换 Switch 时触发 | Function | -                      | -       |
diff --git a/docs/markdown/modal.md b/docs/markdown/modal.md
@@ -2,6 +2,8 @@
 
 ---
 
+提供一个简单的 `Modal` 框, 也可以作为 `Dialog (对话框)` 之类的组件使用 在页面上的层级为 `1000`
+
 ## 使用指南
 
 在 Taro 文件中引入组件

diff --git a/docs/markdown/progress.md b/docs/markdown/progress.md
@@ -2,6 +2,8 @@
 
 ---
 
+提供一个方便的 `进度条` 组件
+
 ## 使用指南
 
 在 Taro 文件中引入组件

diff --git a/docs/markdown/toast.md b/docs/markdown/toast.md
@@ -2,6 +2,8 @@
 
 ---
 
+提供一个简单的 `Toast`, 可以传入 `icon` `image` 来展示不同的效果, 另外提供日常使用频繁的三种状态来快速实现效果 页面层级为`1090`
+
 ## 使用指南
 
 在 Taro 文件中引入组件
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,8 @@ @@
     ---
+    该组件提供一个加载等待元素,也就是Loading组件
     ## 使用指南
     在 Taro 文件中引入组件
@@ Expand Down @@