Docs: 增加组件使用文档 (#62)

* 提供 layout, steps, switch 文档 && 修复 tab 中的错误

* 增加 panel 文档

packages/panel/README.md

@@ -1,3 +1,15 @@
 ## Panel 面板
 
-文档补充中
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+Panel 提供了一块白色的展示区域，直接在需要的元素上加上 zan-panel 类即可，使用方式如下
+```html
+<view class="zan-panel">
+  <view>内容</view>
+</view>
+```

packages/row/README.md

@@ -1,3 +1,34 @@
 ## Layout 布局
 
-文档补充中
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度
+```html
+<view class="zan-row">
+  <view class="zan-col zan-col-8">
+    span: 8
+  </view>
+  <view class="zan-col zan-col-8">
+    span: 8
+  </view>
+  <view class="zan-col zan-col-8">
+    span: 8
+  </view>
+</view>
+```
+
+Layout 提供了 offset 功能。添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同
+```html
+<view class="zan-row">
+  <view class="zan-col zan-col-4">span: 4</view>
+  <view class="zan-col zan-col-10 zan-col-offset-4">offset: 4, span: 10</view>
+</view>
+<view class="zan-row">
+  <view class="zan-col zan-col-12 zan-col-offset-12">offset: 12, span: 12</view>
+</view>
+```

packages/steps/README.md

@@ -1,3 +1,52 @@
 ## Steps 步骤条
 
-文档补充中
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的页面里引入组件库模板和脚本
+```html
+<import src="path/to/zanui-weapp/dist/steps/index.wxml" />
+```
+
+### 代码演示
+在模板中使用 zan-steps 模板，并传入相应数据
+```html
+<template is="zan-steps" data="{{ type: 'horizon', steps }}"></template>
+
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| type | steps 的展示状态，可选值为 'horizon', 'vertical' | String | horizon | |
+| hasDesc | 是否展示描述 | Boolean  | false | |
+| steps | 步骤条展示数据 | Array  |  | 必须 |
+| className | 自定义类目，方便自定义显示 | String  | | |
+
+steps 数据格式如下：
+```js
+[
+  {
+    // 此步骤是否当前完成状态
+    current: false,
+    // 此步骤是否已经完成
+    done: true,
+    // 此步骤显示文案
+    text: '步骤一',
+    // 此步骤描述语
+    desc: '10.01'
+  },
+  {
+    done: true,
+    current: false,
+    text: '步骤二',
+    desc: '10.02'
+  },
+  {
+    done: true,
+    current: true,
+    text: '步骤三',
+    desc: '10.03'
+  }
+]
+```

packages/switch/README.md

@@ -1,3 +1,47 @@
 ## Switch 开关
 
-文档补充中
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的页面里引入组件库模板和脚本
+```html
+<import src="path/to/zanui-weapp/dist/switch/index.wxml" />
+```
+```js
+const Switch = require('path/to/zanui-weapp/dist/switch/index');
+
+// 在 Page 中混入 Switch 里面声明的方法
+Page(Object.assign({}, Switch, {
+  // ...
+}));
+```
+
+### 代码演示
+在模板中使用 zan-switch 模板，并传入相应数据
+```html
+<template is="zan-switch" data="{{ loading, disabled, checked, componentId: 'switch1' }}"></template>
+```
+
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| loading | switch 是否是 loading 状态 | Boolean  | false | |
+| disabled | 是否不可用 | Boolean  | false | |
+| checked | 是否打开状态 | Boolean  | false  | 必须 |
+| componentId | 用于在一个页面上使用多个 switch 时，进行区分 | String  |  | |
+
+当 switch 被点击时，可以在页面中注册 handleZanSwitchChange 方法来监听
+```js
+Page(Object.assign({}, Tab, {
+  handleZanSwitchChange({ componentId, checked }) {
+    // componentId 即为在模板中传入的 componentId
+    // 用于在一个页面上使用多个 switch 时，进行区分
+    // checked 表示 switch 的选中状态
+    this.setData({ checked });
+  }
+}));
+```
+
+

packages/tab/README.md

@@ -13,7 +13,7 @@
 ```js
 const Tab = require('path/to/zanui-weapp/dist/tab/index');
 
-// 在 Page 中混入 Toast 里面声明的方法
+// 在 Page 中混入 Tab 里面声明的方法
 Page(Object.assign({}, Tab, {
   // ...
 }));
@@ -51,7 +51,6 @@ tab 的数据格式如下
   // 是否开启左右滑动类型的 tab
   scroll: false
 }
-
 ```
 
 当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听