diff --git a/packages/panel/README.md b/packages/panel/README.md
index 0c8ca048..b4d9d426 100644
--- a/packages/panel/README.md
+++ b/packages/panel/README.md
@@ -1,3 +1,15 @@
## Panel 面板
-文档补充中
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+Panel 提供了一块白色的展示区域，直接在需要的元素上加上 zan-panel 类即可，使用方式如下
+```html
+
+ 内容
+
+```
diff --git a/packages/row/README.md b/packages/row/README.md
index 1eb16c59..a021d2c2 100644
--- a/packages/row/README.md
+++ b/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
+
+
+ span: 8
+
+
+ span: 8
+
+
+ span: 8
+
+
+```
+
+Layout 提供了 offset 功能。添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同
+```html
+
+ span: 4
+ offset: 4, span: 10
+
+
+ offset: 12, span: 12
+
+```
diff --git a/packages/steps/README.md b/packages/steps/README.md
index 3b726f01..a9d3731f 100644
--- a/packages/steps/README.md
+++ b/packages/steps/README.md
@@ -1,3 +1,52 @@
## Steps 步骤条
-文档补充中
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的页面里引入组件库模板和脚本
+```html
+
+```
+
+### 代码演示
+在模板中使用 zan-steps 模板，并传入相应数据
+```html
+
+
+| 参数 | 说明 | 类型 | 默认值 | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| 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'
+ }
+]
+```
diff --git a/packages/switch/README.md b/packages/switch/README.md
index 68bc62a5..8519df40 100644
--- a/packages/switch/README.md
+++ b/packages/switch/README.md
@@ -1,3 +1,47 @@
## Switch 开关
-文档补充中
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的页面里引入组件库模板和脚本
+```html
+
+```
+```js
+const Switch = require('path/to/zanui-weapp/dist/switch/index');
+
+// 在 Page 中混入 Switch 里面声明的方法
+Page(Object.assign({}, Switch, {
+ // ...
+}));
+```
+
+### 代码演示
+在模板中使用 zan-switch 模板，并传入相应数据
+```html
+
+```
+
+| 参数 | 说明 | 类型 | 默认值 | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| 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 });
+ }
+}));
+```
+
+
diff --git a/packages/tab/README.md b/packages/tab/README.md
index 05624247..7adbf7ae 100644
--- a/packages/tab/README.md
+++ b/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 方法来监听