diff --git a/docs/ExamplesDocsApp.vue b/docs/ExamplesDocsApp.vue
index 454ec1d6c..1e1a9133e 100644
--- a/docs/ExamplesDocsApp.vue
+++ b/docs/ExamplesDocsApp.vue
@@ -58,12 +58,6 @@ export default {
         }
       }
     }
-
-    p {
-      font-size: 14px;
-      color: #5e6d82;
-      margin: 14px 0;
-    }
   }
 
   .page-content {
@@ -72,6 +66,12 @@ export default {
     height: inherit;
     margin-left: 320px;
     padding: 0 20px;
+
+    section > p {
+      font-size: 14px;
+      color: #5e6d82;
+      margin: 14px 0;
+    }
   }
 
   .demo-page {
diff --git a/docs/components/demo-block.vue b/docs/components/demo-block.vue
index b32daf996..44354dbf3 100644
--- a/docs/components/demo-block.vue
+++ b/docs/components/demo-block.vue
@@ -44,6 +44,7 @@ export default {
       padding: 20px 0;
       min-height: 200px;
       max-height: 600px;
+      overflow: auto;
     }
 
     .highlight {
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 2e173c6a1..5220232bc 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -4,19 +4,21 @@
 
 当没有底部按钮时，右侧内容会居中显示。
 
+:::demo
 ```html
 <zan-card
   title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
   desc="描述"
   thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
 </zan-card>
-
 ```
+:::
 
 ### 高级用法
 
 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
 
+:::demo
 ```html
 <zan-card
   title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
@@ -36,6 +38,7 @@
   </div>
 </zan-card>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md
index c18178a2b..4ca79030f 100644
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -20,50 +20,59 @@ export default {
 
 ### 基础用法
 
+:::demo
 ```html
 <zan-cell-group>
   <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
   <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
 </zan-cell-group>
 ```
+:::
 
 ### 标题带描述信息
 
 传入`label`属性，属性值为描述信息的值。
 
+:::demo
 ```html
 <zan-cell-group>
   <zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
   <zan-cell title="单元格2" label="描述信息"></zan-cell>
 </zan-cell-group>
 ```
+:::
 
 ### 带图标
 
 传入`icon`属性。
 
+:::demo
 ```html
 <zan-cell-group>
   <zan-cell title="起码运动馆" icon="home"></zan-cell>
   <zan-cell title="线下门店" icon="location"></zan-cell>
 </zan-cell-group>
 ```
+:::
 
 ### 可点击的链接
 
 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
 
+:::demo
 ```html
 <zan-cell-group>
   <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
   <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
 </zan-cell-group>
 ```
+:::
 
 ### 高级用法
 
 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
 
+:::demo
 ```html
 <zan-cell-group>
   <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
@@ -75,6 +84,7 @@ export default {
   <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
 </zan-cell-group>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples-docs/checkbox.md b/docs/examples-docs/checkbox.md
index ce1ca634e..c8cabae7e 100644
--- a/docs/examples-docs/checkbox.md
+++ b/docs/examples-docs/checkbox.md
@@ -1,9 +1,49 @@
+<style>
+@component-namespace demo {
+  @b checkbox {
+    .zan-checkbox-wrapper {
+      padding: 0 20px;
+
+      .zan-checkbox {
+        margin: 10px 0;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      checkbox1: true,
+      checkbox2: true,
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  },
+
+  watch: {
+    result(val) {
+      console.log(val);
+    }
+  }
+};
+</script>
+
 ## Checkbox组件
 
 ### 基础用法
 
+:::demo
 ```html
-<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+<div class="zan-checkbox-wrapper">
+  <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+</div>
 
 <script>
 export default {
@@ -15,11 +55,15 @@ export default {
 }; 
 </script>
 ```
+:::
 
 ### 禁用状态
 
+:::demo
 ```html
-<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
+<div class="zan-checkbox-wrapper">
+  <zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
+</div>
 
 <script>
 export default {
@@ -31,13 +75,17 @@ export default {
 }; 
 </script>
 ```
+:::
 
 ### Checkbox组
 
+:::demo
 ```html
-<zan-checkbox-group v-model="result">
-  <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-</zan-checkbox-group>
+<div class="zan-checkbox-wrapper">
+  <zan-checkbox-group v-model="result">
+    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+  </zan-checkbox-group>
+</div>
 
 <script>
 export default {
@@ -60,13 +108,17 @@ export default {
 };
 </script>
 ```
+:::
 
 ### 禁用Checkbox组
 
+:::demo
 ```html
-<zan-checkbox-group v-model="result" disabled>
-  <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-</zan-checkbox-group>
+<div class="zan-checkbox-wrapper">
+  <zan-checkbox-group v-model="result" disabled>
+    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+  </zan-checkbox-group>
+</div>
 
 <script>
 export default {
@@ -83,9 +135,11 @@ export default {
 };
 </script>
 ```
+:::
 
 ### 与Cell组件一起使用
 
+:::demo
 ```html
 <zan-checkbox-group v-model="result">
   <zan-cell-group>
@@ -110,6 +164,7 @@ export default {
 };
 </script>
 ```
+:::
 
 ### Checkbox API
 
diff --git a/docs/examples-docs/dialog.md b/docs/examples-docs/dialog.md
index 53c8de4a4..da4a96912 100644
--- a/docs/examples-docs/dialog.md
+++ b/docs/examples-docs/dialog.md
@@ -30,6 +30,7 @@ export default {
 
 ### 基础用法
 
+:::demo
 ```html
 <zan-button @click="handleAlertClick">alert</zan-button>
 
@@ -63,6 +64,7 @@ export default {
 };
 </script>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md
index c9f572471..8516c48a2 100644
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
@@ -6,6 +6,7 @@
 
 根据`type`属性显示不同的输入框。
 
+:::demo
 ```html
 <zan-cell-group>
   <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
@@ -13,26 +14,31 @@
   <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
 </zan-cell-group>
 ```
+:::
 
 ### 无label的输入框
 
 不传入`label`属性即可。
 
+:::demo
 ```html
 <zan-cell-group>
   <zan-field type="text" placeholder="请输入用户名"></zan-field>
 </zan-cell-group>
 ```
+:::
 
 ### 监听change事件
 
 监听组件的`change`事件。
 
+:::demo
 ```html
 <zan-cell-group>
   <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
 </zan-cell-group>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples-docs/install.md b/docs/examples-docs/install.md
index b43a4fc73..a88c3b88d 100644
--- a/docs/examples-docs/install.md
+++ b/docs/examples-docs/install.md
@@ -2,6 +2,6 @@
 
 ### ynpm安装
 
-```
+```shell
 npm i @youzan/zanui-vue -S
 ```
diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md
index d5b9c2af0..46aabee91 100644
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -1,33 +1,5 @@
-l## Switch组件
-
-### 基础用法
-
-```html
-<template>
-  <div class="page-loading">
-    <h1 class="page-title">Loading</h1>
-    <h2 class="page-sub-title">渐变深色spinner</h2>
-    <div class="page-loading__example">
-      <zan-loading class="some-customized-class"></zan-loading>
-    </div>
-    <h2 class="page-sub-title">渐变浅色spinner</h2>
-    <div class="page-loading__example page-loading__example--with-bg">
-      <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
-    </div>
-    <h2 class="page-sub-title">单色spinner</h2>
-    <div class="page-loading__example">
-      <zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
-    </div>
-    <h2 class="page-sub-title">单色spinner</h2>
-    <div class="page-loading__example">
-      <zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
-    </div>
-  </div>
-</template>
-
-
 <style>
-.page-loading__example{
+.demo-loading__example{
   width: 30px;
   height: 30px;
   padding: 20px;
@@ -36,11 +8,38 @@ l## Switch组件
   border: 1px solid transparent;
 }
 
-.page-loading__example--with-bg {
+.demo-loading__example--with-bg {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.page-loading {
+.demo-loading {
   padding: 0 20px;
 }
-</style>
\ No newline at end of file
+</style>
+
+## Loading
+
+### 基础用法
+
+:::demo
+```html
+<div class="demo-loading">
+  <h2 class="demo-sub-title">渐变深色spinner</h2>
+  <div class="demo-loading__example">
+    <zan-loading class="some-customized-class"></zan-loading>
+  </div>
+  <h2 class="demo-sub-title">渐变浅色spinner</h2>
+  <div class="demo-loading__example demo-loading__example--with-bg">
+    <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
+  </div>
+  <h2 class="demo-sub-title">单色spinner</h2>
+  <div class="demo-loading__example">
+    <zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
+  </div>
+  <h2 class="demo-sub-title">单色spinner</h2>
+  <div class="demo-loading__example">
+    <zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
+  </div>
+</div>
+```
+:::
diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md
index 947509b44..f33211c0c 100644
--- a/docs/examples-docs/panel.md
+++ b/docs/examples-docs/panel.md
@@ -1,38 +1,55 @@
+<style>
+@component-namespace demo {
+  @b panel {
+    .zan-panel-sum {
+      background: #fff;
+      text-align: right;
+      font-size: 14px;
+      color: #333;
+      line-height: 30px;
+      padding-right: 15px;
+
+      span {
+        color: red;
+      }
+    }
+
+    .zan-panel-buttons {
+      text-align: right;
+
+      .zan-button {
+        margin-left: 5px;
+      }
+    }
+
+    .panel-content {
+      padding: 20px;
+    }
+  }
+}
+</style>
+
 ## Panel 面板
 
 面板只是一个容器，里面可以放入自定义的内容。
 
 ### 基础用法
 
+:::demo
 ```html
 <zan-panel title="标题" desc="标题描述" status="状态">
-  <zan-card
-    title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
-    desc="商品SKU1，商品SKU2"
-    thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-    <div class="zan-card__row" slot="title">
-      <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-      <span class="zan-card__price">¥ 2.00</span>
-    </div>
-    <div class="zan-card__row" slot="desc">
-      <h4 class="zan-card__desc">商品sku</h4>
-      <span class="zan-card__num">x 2</span>
-    </div>
-    <div class="zan-card__footer" slot="footer">
-      <zan-button size="mini">按钮一</zan-button>
-      <zan-button size="mini">按钮二</zan-button>
-    </div>
-  </zan-card>
-  <div class="zan-panel-sum">
-    合计：<span>¥ 1999.90</span>
+  <div class="panel-content">
+    panel内容
   </div>
 </zan-panel>
 ```
+:::
 
 ### 高级用法
 
 使用具名`slot`自定义内容。
 
+:::demo
 ```html
 <zan-panel title="标题" desc="标题描述" status="状态">
   <zan-card
@@ -61,6 +78,7 @@
   </div>
 </zan-panel>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples-docs/picker.md b/docs/examples-docs/picker.md
index e635b8492..2fcac8901 100644
--- a/docs/examples-docs/picker.md
+++ b/docs/examples-docs/picker.md
@@ -1,12 +1,45 @@
+<script>
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
+export default {
+  data() {
+    return {
+      pickerColumns: [
+        {
+          values: Object.keys(citys),
+          className: 'column1'
+        },
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
+  }
+};
+</script>
+
 ## Picker组件
 
 模仿iOS中的`UIPickerView`。
 
 ### 基础用法
 
+:::demo
 ```html
 <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index 110ba3150..f28fe762d 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -2,6 +2,7 @@
 
 ### 基础用法
 
+:::demo
 ```html
 <div class="zan-button-1">
   <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
@@ -54,6 +55,7 @@ export default {
 };
 </script>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples-docs/quickstart.md b/docs/examples-docs/quickstart.md
index 2a83a5fea..7f30110ab 100644
--- a/docs/examples-docs/quickstart.md
+++ b/docs/examples-docs/quickstart.md
@@ -2,7 +2,7 @@
 
 ### 完整引入
 
-```
+```js
 import Vue from 'vue';
 import ZanUI from '@youzan/zanui-vue';
 import '@youzan/zanui-vue/lib/zanui-css/index.css';
@@ -12,7 +12,7 @@ Vue.use(ZanUI);
 
 ### 按需引入
 
-```
+```js
 import Vue from 'vue';
 import { Button, Cell } from '@youzan/zanui-vue';
 import '@youzan/zanui-vue/lib/zanui-css/button.css';
diff --git a/docs/examples-docs/radio.md b/docs/examples-docs/radio.md
index 433894a26..92e66068b 100644
--- a/docs/examples-docs/radio.md
+++ b/docs/examples-docs/radio.md
@@ -1,8 +1,25 @@
+<style>
+@component-namespace demo {
+  @b radio {
+    .zan-radios {
+      padding: 0 20px;
+
+      .zan-radio {
+        margin: 10px 0;
+      }
+    }
+  }
+}
+</style>
+
 <script>
 export default {
   data() {
     return {
-      radio: '1'
+      radio1: '1',
+      radio2: '2',
+      radio3: '1',
+      radio4: '1'
     };
   }
 };
@@ -12,9 +29,12 @@ export default {
 
 ### 基础用法
 
+:::demo
 ```html
-<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
-<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
+<div class="zan-radios">
+  <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
+  <zan-radio name="2" v-model="radio1">单选框2</zan-radio>
+</div>
 
 <script>
 export default {
@@ -26,12 +46,16 @@ export default {
 };
 </script>
 ```
+:::
 
 ### 禁用状态
 
+:::demo
 ```html
-<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
-<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
+<div class="zan-radios">
+  <zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
+  <zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
+</div>
 
 <script>
 export default {
@@ -43,15 +67,19 @@ export default {
 };
 </script>
 ```
+:::
 
 ### radio组
 
+:::demo
 ```html
-<zan-radio-group v-model="radio3">
-  <zan-radio name="1">单选框1</zan-radio>
-  <zan-radio name="2">单选框2</zan-radio>
-</zan-radio-group>
-
+<div class="zan-radios">
+  <zan-radio-group v-model="radio3">
+    <zan-radio name="1">单选框1</zan-radio>
+    <zan-radio name="2">单选框2</zan-radio>
+  </zan-radio-group>
+</div>
+  
 <script>
 export default {
   data() {
@@ -62,9 +90,11 @@ export default {
 };
 </script>
 ```
+:::
 
 ### 与Cell组件一起使用
 
+:::demo
 ```html
 <zan-radio-group v-model="radio4">
   <zan-cell-group>
@@ -83,6 +113,7 @@ export default {
 };
 </script>
 ```
+:::
 
 ### Radio API
 
diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md
index 644bfb416..af2d6505e 100644
--- a/docs/examples-docs/search.md
+++ b/docs/examples-docs/search.md
@@ -1,17 +1,4 @@
-## Search 组件
-
-### 基础用法
-
-
-```html
-<zan-search 
-    placeholder="商品名称"
-    @search="goSearch"
->
-</zan-search>
-```
-
-```javascript
+<script>
 export default {
   methods: {
     goSearch(value) {
@@ -19,7 +6,26 @@ export default {
     }
   }
 };
+</script>
+
+## Search 组件
+
+### 基础用法
+
+:::demo
+```html
+<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
+<script>
+export default {
+  methods: {
+    goSearch(value) {
+      alert(value)
+    }
+  }
+};
+</script>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md
index ed483a012..255cae703 100644
--- a/docs/examples-docs/steps.md
+++ b/docs/examples-docs/steps.md
@@ -1,7 +1,38 @@
+<style>
+@component-namespace demo {
+  @b steps {
+    .steps-success {
+      color: #06bf04;
+    }
+
+    .zan-button {
+      margin-left: 15px;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      active: 0
+    };
+  },
+
+  methods: {
+    nextStep() {
+      if (++this.active > 3) this.active = 0;
+    }
+  }
+}
+</script>
+
 ## Steps 步骤条
 
 ### 基础用法
 
+:::demo
 ```html
 <zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
   <zan-step>买家下单</zan-step>
@@ -10,6 +41,8 @@
   <zan-step>交易完成</zan-step>
 </zan-steps>
 
+<zan-button @click="nextStep">下一步</zan-button>
+
 <script>
 export default {
   data() {
@@ -26,9 +59,11 @@ export default {
 }
 </script>
 ```
+:::
 
 ### 只显示步骤条
 
+:::demo
 ```html
 <zan-steps :active="active">
   <zan-step>买家下单</zan-step>
@@ -37,6 +72,7 @@ export default {
   <zan-step>交易完成</zan-step>
 </zan-steps>
 ```
+:::
 
 
 ### Steps API
diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index 75f11bb1e..4316d1c96 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -1,33 +1,47 @@
+<style>
+  @component-namespace demo {
+    @b switch {
+      padding: 0 15px 15px;
+
+      @e wrapper {
+        width: 33.33%;
+        float: left;
+        text-align: center;
+      }
+
+      @e text {
+        margin: 20px 0;
+      }
+    }
+  }
+</style>
+
+
 ## Switch组件
 
 ### 基础用法
 
+:::demo
 ```html
-<div class="page-switch">
-  <h1 class="page-title">Switch</h1>
-  <h2 class="page-sub-title">基础用法</h2>
-  <div class="page-switch">
-    <div class="page-switch__wrapper">
-      <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
-      <div class="page-switch__text">{{switchStateText}}</div>
-    </div>
-    <div class="page-switch__wrapper">
-      <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
-      <div class="page-switch__text">ON, DISABLED</div>
-    </div>
-    <div class="page-switch__wrapper">
-      <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
-      <div class="page-switch__text">OFF, DISABLED</div>
-    </div>
-    <div class="page-switch__wrapper">
-      <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
-      <div class="page-switch__text">ON, LOADING</div>
-    </div>
-    <div class="page-switch__wrapper">
-      <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
-      <div class="page-switch__text">OFF, LOADING</div>
-    </div>
-  </div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
+  <div class="demo-switch__text">{{switchStateText}}</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
+  <div class="demo-switch__text">ON, DISABLED</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
+  <div class="demo-switch__text">OFF, DISABLED</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
+  <div class="demo-switch__text">ON, LOADING</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
+  <div class="demo-switch__text">OFF, LOADING</div>
 </div>
 
 <script>
@@ -50,6 +64,7 @@ export default {
 };  
 </script>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md
index 05f9a30af..acdbbb8e4 100644
--- a/docs/examples-docs/tag.md
+++ b/docs/examples-docs/tag.md
@@ -1,17 +1,52 @@
+<style>
+.tags-container {
+  padding: 5px 15px;
+
+  .zan-tag + .zan-tag {
+    margin-left: 10px;
+  }
+}
+</style>
+
 ## Tag 组件
 
 ### 基础用法
+
+:::demo
 ```html
-<zan-tag>返现</zan-tag>
-<zan-tag :plain="true">返现</zan-tag>
+<div class="tags-container">
+  <zan-tag>返现</zan-tag>
+  <zan-tag :plain="true">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="danger">返现</zan-tag>
+  <zan-tag type="danger">四字标签</zan-tag>
+  <zan-tag type="danger">一</zan-tag>
+</div>
 ```
+:::
 
 ### 高级用法
+
+:::demo
 ```html
-<zan-tag type="danger">返现</zan-tag>
-<zan-tag type="success">返现</zan-tag>
-<zan-tag type="success" :plain="true">返现</zan-tag>
+<div class="tags-container">
+  <zan-tag type="danger">返现</zan-tag>
+  <zan-tag :plain="true" type="danger">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="primary">返现</zan-tag>
+  <zan-tag :plain="true" type="primary">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="success">返现</zan-tag>
+  <zan-tag :plain="true" type="success">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="danger" :mark="true">返现</zan-tag>
+</div>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md
index 3e2b527c3..0ef76c06d 100644
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -2,6 +2,7 @@
 
 ### 基础用法
 
+:::demo
 ```html
 <div class="waterfall">
   <div
@@ -62,6 +63,7 @@ export default {
 };
 </script>
 ```
+:::
 
 ### API
 
diff --git a/docs/examples/search.vue b/docs/examples/search.vue
index 41391b5ae..4f3893c13 100644
--- a/docs/examples/search.vue
+++ b/docs/examples/search.vue
@@ -7,17 +7,19 @@ export default {
   }
 };
 </script>
+
 <template>
   <div class="page-search">
     <h1 class="page-title">Search</h1>
     
     <h2 class="page-sub-title">基础用法</h2>
-    <zan-search  placeholder="商品名称" @search="goSearch">
+    <zan-search placeholder="商品名称" @search="goSearch">
     </zan-search>
   </div>
 </template>
+
 <style>
   .page-badge {
     padding: 0 15px;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
index c661571fd..6b2f83660 100644
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -2,7 +2,7 @@
   <div
     class="zan-checkbox"
     :class="{
-      'is-disabled': isDisabled
+      'zan-checkbox--disabled': isDisabled
     }">
     <span class="zan-checkbox__input">
       <input
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index 80118093a..3f7f207cf 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -2,7 +2,7 @@
   <div
     class="zan-radio"
     :class="{
-      'is-disabled': isDisabled
+      'zan-radio--disabled': isDisabled
     }">
     <span class="zan-radio__input">
       <input
@@ -44,6 +44,7 @@ export default {
 
     currentValue: {
       get() {
+        console.log(this.value);
         return this.isGroup && this.parentGroup ? this.parentGroup.value : this.value;
       },
 
diff --git a/packages/steps/src/step.vue b/packages/steps/src/step.vue
index 697d78468..5f2cac23f 100644
--- a/packages/steps/src/step.vue
+++ b/packages/steps/src/step.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="zan-step" :class="`zan-step--${status}`">
+  <div class="zan-step" :class="statusClass">
     <div class="zan-step__circle-container">
       <i class="zan-step__circle" v-if="status !== 'process'"></i>
       <i class="zan-icon zan-icon-checked" v-else></i>
@@ -31,6 +31,10 @@ export default {
       } else if (index === active) {
         return 'process';
       }
+    },
+    statusClass() {
+      const status = this.status;
+      return status ? 'zan-step--' + status : '';
     }
   }
 };
diff --git a/packages/zanui-css/src/checkbox.css b/packages/zanui-css/src/checkbox.css
index 391c1da04..ec3becb1e 100644
--- a/packages/zanui-css/src/checkbox.css
+++ b/packages/zanui-css/src/checkbox.css
@@ -2,7 +2,9 @@
 
 @component-namespace zan {
   @b checkbox {
-    @when disabled {
+    overflow: hidden;
+
+    @m disabled {
       .zan-icon {
         color: #d1dbe5;
       }
@@ -12,6 +14,7 @@
       position: relative;
       height: 22px;
       margin-right: 15px;
+      float: left;
     }
 
     @e control {
@@ -26,6 +29,8 @@
 
     @e label {
       line-height: 22px;
+      margin-left: 37px;
+      display: block;
     }
 
     .zan-icon {
diff --git a/packages/zanui-css/src/radio.css b/packages/zanui-css/src/radio.css
index 43fb67afd..141e48e69 100644
--- a/packages/zanui-css/src/radio.css
+++ b/packages/zanui-css/src/radio.css
@@ -2,7 +2,9 @@
 
 @component-namespace zan {
   @b radio {
-    @when disabled {
+    overflow: hidden;
+
+    @m disabled {
       .zan-icon {
         color: #d1dbe5;
       }
@@ -11,7 +13,7 @@
     @e input {
       position: relative;
       height: 22px;
-      margin-right: 15px;
+      float: left;
     }
 
     @e control {
@@ -26,6 +28,8 @@
 
     @e label {
       line-height: 22px;
+      display: block;
+      margin-left: 37px;
     }
 
     .zan-icon {
diff --git a/packages/zanui-css/src/steps.css b/packages/zanui-css/src/steps.css
index 9c36fc87d..eb6c841ca 100644
--- a/packages/zanui-css/src/steps.css
+++ b/packages/zanui-css/src/steps.css
@@ -53,6 +53,7 @@
       margin: 0 0 10px;
       overflow: hidden;
       padding-bottom: 20px;
+      position: relative;
     }
   }
 
@@ -105,7 +106,7 @@
 
       .zan-step__circle-container {
         left: auto;
-        right: -6px;
+        right: -8px;
       }
 
       .zan-step__line {