feat(docs): 调整grid 和 float-layout 的文档

jd-opensource · Aug 22, 2018 · 8cef6a8 · 8cef6a8
1 parent 5971977
commit 8cef6a8
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 45 deletions.
diff --git a/docs/markdown/float-layout.md b/docs/markdown/float-layout.md
@@ -9,7 +9,7 @@
 :::demo
 
 ```js
-import { AtFloatLayout } from "taro-ui"
+import { AtFloatLayout } from "taro-ui";
 ```
 
 :::
@@ -19,20 +19,22 @@ import { AtFloatLayout } from "taro-ui"
 :::demo
 
 ```html
-<AtFloatLayout title='这是个标题' isOpened={isOpened}>
-  <View>
-    这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
-    随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
-    随你怎么写
-  </View>
+<AtFloatLayout
+  isOpened
+  title='这是个标题'
+  onClose={ this.handleClose } >
+  这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
+  随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
+  随你怎么写
 </AtFloatLayout>
 ```
 
 :::
 
 ## AtFloatLayout 参数
 
-| 参数     | 说明                 | 类型    | 可选值 | 默认值  |
-| -------- | -------------------- | ------- | ------ | ------- |
-| title    | 元素的标题           | String  | -      | -       |
-| isOpened | 控制是否出现在页面上 | Boolean | -      | `false` |
+| 参数     | 说明                     | 类型     | 可选值 | 默认值  |
+| -------- | ------------------------ | -------- | ------ | ------- |
+| title    | 元素的标题               | String   | -      | -       |
+| isOpened | 控制是否出现在页面上     | Boolean  | -      | `false` |
+| onClose  | 元素被关闭时候触发的事件 | Function | -      | -       |
diff --git a/docs/markdown/grid.md b/docs/markdown/grid.md
@@ -9,7 +9,7 @@
 :::demo
 
 ```js
-import { AtGrid } from "taro-ui"
+import { AtGrid } from "taro-ui";
 ```
 
 :::
@@ -22,28 +22,28 @@ import { AtGrid } from "taro-ui"
 <AtGrid data={
   [
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
+      value: '领取中心'
     },
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
+      value: '找折扣'
     },
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
+      value: '领会员'
     },
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
+      value: '新品首发'
     },
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
+      value: '领京豆'
     },
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
+      value: '手机馆'
     }
   ]
 } />
@@ -57,30 +57,30 @@ import { AtGrid } from "taro-ui"
 
 ```html
 <AtGrid mode='rect' data={
-  [
+ [
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
+      value: '领取中心'
     },
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
+      value: '找折扣'
     },
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
+      value: '领会员'
     },
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
+      value: '新品首发'
     },
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
+      value: '领京豆'
     },
     {
-      icon: 'emoji',
-      value: '放置文本'
+      image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
+      value: '手机馆'
     }
   ]
 } />
@@ -90,9 +90,9 @@ import { AtGrid } from "taro-ui"
 
 ## AtGrid 参数
 
-| 参数      | 说明               | 类型                                               | 可选值 | 默认值  |
-| --------- | ------------------ | -------------------------------------------------- | ------ | ------- |
-| data      | 宫格布局数据源     | Array[{'{ icon , value , iconSize , iconColor }'}] | -      | -       |
-| mode      | 元素的标题         | String                                             | -      | -       |
-| columnNum | 每一列有多少个     | Number                                             | -      | -       |
-| onClick   | 点击宫格触发的时间 | (item: Object, index: number): void                | -      | `false` |
+| 参数      | 说明               | 类型                                | 可选值 | 默认值  |
+| --------- | ------------------ | ----------------------------------- | ------ | ------- |
+| data      | 宫格布局数据源     | Array[{'{ icon , value , image }'}] | -      | -       |
+| mode      | 元素的标题         | String                              | -      | -       |
+| columnNum | 每一列有多少个     | Number                              | -      | -       |
+| onClick   | 点击宫格触发的时间 | (item: Object, index: number): void | -      | `false` |
diff --git a/src/components/float-layout/index.js b/src/components/float-layout/index.js
@@ -32,7 +32,7 @@ export default class AtFloatLayout extends Taro.Component {
     if (_isFunction(this.props.onClose)) {
       this.props.onClose()
     }
-  }
+  };
 
   close = () => {
     this.setState(
@@ -41,7 +41,7 @@ export default class AtFloatLayout extends Taro.Component {
       },
       this.handleClose
     )
-  }
+  };
 
   render () {
     const { isOpened } = this.state
@@ -75,6 +75,7 @@ export default class AtFloatLayout extends Taro.Component {
 }
 
 AtFloatLayout.propTypes = {
+  onClose: PropTypes.func,
   title: PropTypes.string,
   isOpened: PropTypes.bool
 }
diff --git a/src/components/grid/index.js b/src/components/grid/index.js
@@ -78,6 +78,7 @@ AtGrid.defaultProps = {
 
 AtGrid.propTypes = {
   mode: PropTypes.string,
+  onClick: PropTypes.func,
   columnNum: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
   data: PropTypes.arrayOf(
     PropTypes.shape({