diff --git a/examples/views/docs/component/button.md b/examples/views/docs/component/button.md
index 3cccd79..dded211 100644
--- a/examples/views/docs/component/button.md
+++ b/examples/views/docs/component/button.md
@@ -108,11 +108,11 @@ export default {
 
 参数|说明|类型|可选值|默认值
 -|-|-|-|-
-type | 按钮类型 | String | default、primary、secondary | default
-block | 块状按钮 | Boolean | true、false | false
-round | 圆角按钮 | Boolean | true、false | false
-square | 矩形按钮 | Boolean | true、false | false
-disabled | 按钮禁用 | Boolean | true、false | false
+type | 按钮类型 | String | default,primary,secondary | default
+block | 块状按钮 | Boolean | true,false | false
+round | 圆角按钮 | Boolean | true,false | false
+square | 矩形按钮 | Boolean | true,false | false
+disabled | 按钮禁用 | Boolean | true,false | false
 
 ## Events 事件
 
diff --git a/examples/views/docs/component/checkbox.md b/examples/views/docs/component/checkbox.md
index 5ad769c..737e0fe 100644
--- a/examples/views/docs/component/checkbox.md
+++ b/examples/views/docs/component/checkbox.md
@@ -4,9 +4,7 @@
 
 ## 基础用法
 
-说明
-
-::: snippet 示例
+::: snippet `color`颜色，`size`大小
 
 ```html
 <template>
@@ -29,4 +27,18 @@ export default {
 </script>
 ```
 
-:::
\ No newline at end of file
+:::
+
+
+## API
+
+## Attribute 属性
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value | 值 | Boolean | - | -
+icon | 图标 | String | - | checkcircle
+iconChecked | 选中图标 | String | - | radiobuttonunchecked
+labelDisabled | 禁用label点击 | Boolean | - | false
+disabled | 禁用 | Boolean | - | false
+color | 颜色 | String | - | -
+size | 大小 | String | - | -
\ No newline at end of file
diff --git a/examples/views/docs/component/icon.md b/examples/views/docs/component/icon.md
index db7e99f..7eede4f 100644
--- a/examples/views/docs/component/icon.md
+++ b/examples/views/docs/component/icon.md
@@ -87,11 +87,11 @@
 -|-|-|-|-
 name | 图标名 | String | - | -
 fontFamily | 图标类型 | String | - | iconfont
-classPrefix | 图标前缀 | String | - | 'icon-'
+classPrefix | 图标前缀 | String | - | icon-
 size | 大小 | String | - | -
 color | 颜色 | String | - | -
 info | 角标内容 | Number, String | - | -
-dot | 标记点 | Boolean | - | -
+dot | 标记点 | Boolean | true,false | -
 
 ## Events 事件
 
diff --git a/examples/views/docs/component/loading.md b/examples/views/docs/component/loading.md
index 8e440a6..b823b0f 100644
--- a/examples/views/docs/component/loading.md
+++ b/examples/views/docs/component/loading.md
@@ -1,33 +1,75 @@
 # Loading 加载
 
-说明
+## 加载类型
 
-## 基础用法
+::: snippet 设置`type`改变加载类型，默认为`circular`
 
-说明
+```html
+<template>
+  <div>
+    <zui-loading type="circular"></zui-loading>
+    <zui-loading type="spinner"></zui-loading>
+  </div>
+</template>
+```
+
+:::
 
-::: snippet 示例
+## 颜色
+
+::: snippet 设置`color`改变颜色
 
 ```html
 <template>
   <div>
-    <zui-loading></zui-loading>
     <zui-loading color="red"></zui-loading>
-    <zui-loading color="deepskyblue" type="loading"></zui-loading>
+    <zui-loading color="deepskyblue" type="spinner"></zui-loading>
+  </div>
+</template>
+```
+
+:::
+
+## 大小
+
+::: snippet 设置`size`改变大小
+
+```html
+<template>
+  <div>
+    <zui-loading color="deepskyblue"></zui-loading>
+    <zui-loading size="3rem" color="red"></zui-loading>
+  </div>
+</template>
+```
+
+:::
+
+## 加载文案
+
+可以设置任意类型的加载文案
+
+::: snippet 设置`vertical`改变为垂直布局
+
+```html
+<template>
+  <div>
     <zui-loading>加载中...</zui-loading>
     <zui-loading vertical>加载中...</zui-loading>
-    <zui-loading vertical size="3rem" text-size="1rem">加载中...</zui-loading>
   </div>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-    }
-  },
-}
-</script>
 ```
 
-:::
\ No newline at end of file
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+type | 类型 | String | - | circular
+color | 颜色 | String | - | -
+size | 大小 | Number,String | - | 2rem
+vertical | 垂直 | Boolean | true,false | false
+textSize | 文本大小 | Number,String | - | -
\ No newline at end of file
diff --git a/examples/views/docs/component/nav-bar.md b/examples/views/docs/component/nav-bar.md
index baf2de6..2128dc4 100644
--- a/examples/views/docs/component/nav-bar.md
+++ b/examples/views/docs/component/nav-bar.md
@@ -1,30 +1,80 @@
 # NavBar 导航栏
 
-导航栏
+APP导航栏
 
 ## 基础用法
 
-说明
+::: snippet 设置`title`改变标题，设置`primary`改变为主色模式，设置`border`显示下边框
 
-::: snippet 示例
+```html
+<template>
+  <div>
+    <zui-nav-bar title="显示边框" border></zui-nav-bar>
+    <zui-nav-bar title="默认"></zui-nav-bar>
+    <zui-nav-bar title="主色" primary></zui-nav-bar>
+  </div>
+</template>
+```
+
+:::
+
+## 左右按钮
+
+支持自定义左侧和右侧的按钮文字，且支持显示左侧返回按钮
+
+::: snippet 设置`leftText`改变左侧按钮文案，设置`rightText`改变右侧按钮文案
 
 ```html
 <template>
   <div>
-    <zui-nav-bar title="则一速达" leftArrow></zui-nav-bar>
-    <zui-nav-bar title="则一速达" leftText="返回" rightText="设置" primary></zui-nav-bar>
-    <zui-nav-bar title="则一速达" leftText="返回" leftArrow></zui-nav-bar>
+    <zui-nav-bar title="返回按钮" leftArrow></zui-nav-bar>
+    <zui-nav-bar title="左侧文字" leftText="返回" primary></zui-nav-bar>
+    <zui-nav-bar title="右侧文字" rightText="设置"></zui-nav-bar>
   </div>
 </template>
+```
+
+:::
+
+## 自定义按钮
 
-<script>
-export default {
-  data() {
-    return {
-    }
-  },
-}
-</script>
+支持插槽
+
+::: snippet 可以设置`left`、`title`、`right`插槽自定义按钮和标题内容
+
+```html
+<template>
+  <div>
+    <zui-nav-bar title="则一速达">
+      <div slot="left"><zui-icon name="search"></zui-icon>搜索</div>
+      <div slot="title"><zui-icon name="dns"></zui-icon>标题</div>
+      <div slot="right"><zui-icon name="settings"></zui-icon>设置</div>
+    </zui-nav-bar>
+  </div>
+</template>
 ```
 
-:::
\ No newline at end of file
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+title | 标题 | String | - | -
+leftIcon | 左侧图标 | String | - | return
+leftText | 左侧文案 | String | - | -
+rightText | 右侧文案 | String | - | -
+leftArrow | 是否显示左侧箭头 | Boolean | - | false
+fixed | 是否固定在顶部 | Boolean | - | false
+border | 是否显示下边框 | Boolean | - | false
+zIndex | z-index | Number,String | - | 1
+primary | 是否为品牌色主题 | Boolean | - | false
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+click-left | 左侧按钮点击事件 | -
+click-right | 右侧按钮点击事件 | -
\ No newline at end of file
diff --git a/examples/views/docs/component/popup.md b/examples/views/docs/component/popup.md
index 0cc7e0c..0ec6c83 100644
--- a/examples/views/docs/component/popup.md
+++ b/examples/views/docs/component/popup.md
@@ -4,16 +4,32 @@
 
 ## 基础用法
 
-弹出框说明
+弹出框内容样式需要自定义
 
-::: snippet 示例
+::: snippet 设置`position`改变弹出位置
 
 ```html
 <template>
   <div class="popup-demo">
-    <zui-button @click="popupVisible = true">普通按钮</zui-button>
-    <zui-popup v-model="popupVisible">
-      弹出框内容
+    <zui-button @click="popupVisible.center = true;">屏幕中弹出</zui-button>
+    <zui-button @click="popupVisible.left = true;">左侧弹出</zui-button>
+    <zui-button @click="popupVisible.right = true;">右侧弹出</zui-button>
+    <zui-button @click="popupVisible.top = true;">顶部弹出</zui-button>
+    <zui-button @click="popupVisible.bottom = true;">底部弹出</zui-button>
+    <zui-popup v-model="popupVisible.center">
+      <div class="popup-box">弹出框内容</div>
+    </zui-popup>
+    <zui-popup v-model="popupVisible.left" position="left">
+      <div class="popup-content">弹出框内容</div>
+    </zui-popup>
+    <zui-popup v-model="popupVisible.right" position="right">
+      <div class="popup-content">弹出框内容</div>
+    </zui-popup>
+    <zui-popup v-model="popupVisible.top" position="top">
+      <div class="popup-bar">弹出框内容</div>
+    </zui-popup>
+    <zui-popup v-model="popupVisible.bottom" position="bottom">
+      <div class="popup-bar">弹出框内容</div>
     </zui-popup>
   </div>
 </template>
@@ -22,7 +38,13 @@
 export default {
   data() {
     return {
-      popupVisible: false,
+      popupVisible: {
+        center: false,
+        left: false,
+        right: false,
+        top: false,
+        bottom: false,
+      },
     }
   },
 }
@@ -30,11 +52,53 @@ export default {
 
 <style lang="scss">
 .popup-demo {
-  height: 20vh;
-  width: 400px;
+  height: 40vh;
+  width: 600px;
   position: relative;
+  overflow: hidden;
+  background: #f5f5f5;
+  padding: 1rem;
+}
+.popup-demo .zui-button {
+  margin-right: 0.5rem;
+  margin-bottom: 1rem;
+}
+.popup-demo .popup-box {
+  background: #fff;
+  padding: 1rem;
+  border-radius: 0.25rem;
+}
+.popup-demo .popup-content {
+  background: #fff;
+  padding: 1rem;
+  height: 100%;
+  box-sizing: border-box;
+}
+.popup-demo .popup-bar {
+  background: #fff;
+  padding: 1rem;
 }
 </style>
 ```
 
-:::
\ No newline at end of file
+:::
+
+## API
+
+## Attribute 属性
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+v-model | 弹出层是否可见 | Boolean | - | false
+has-mask | 是否有蒙层 | Boolean | - | true
+mask-closable | 点击蒙层是否可关闭弹出层 | Boolean | - | true
+position | 弹出层位置 | String | center, top, bottom, left, right | center
+transition | 弹出层过渡动画 | String | fade, fa | -
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+beforeShow | 弹出层即将展示事件 | -
+show | 弹出层展示事件 | -
+beforeHide | 弹出层即将隐藏事件 | -
+hide | 弹出层隐藏事件 | -
\ No newline at end of file
diff --git a/examples/views/docs/component/steps.md b/examples/views/docs/component/steps.md
index 4a9900d..f84f84b 100644
--- a/examples/views/docs/component/steps.md
+++ b/examples/views/docs/component/steps.md
@@ -1,12 +1,11 @@
 # Steps 步骤条
 
-说明
+参考 <a href="https://didi.github.io/mand-mobile/#/zh-CN/docs/components/basic/steps" target="_blank">Mand Mobile - Steps</a>
 
 ## 基础用法
 
-说明
 
-::: snippet 示例
+::: snippet 设置`steps`步骤
 
 ```html
 <template>
@@ -34,9 +33,7 @@ export default {
 
 ## 纵向展示
 
-说明
-
-::: snippet 示例
+::: snippet 设置`direction`为**vertical**
 
 ```html
 <template>
@@ -61,4 +58,15 @@ export default {
 </script>
 ```
 
-:::
\ No newline at end of file
+:::
+
+## API
+
+## Attribute 属性
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+steps | 步骤信息数组 | Array<{name, text}> | - | -
+current | 当前步骤/进度 | Number | 支持小数 | 0
+direction | 展示方向 | String | horizontal, vertical | horizontal
+transition | 进度变化动效 | Boolean | - | false
+vertical-adaptive | 步骤高度自适应 | Boolean | - | false
diff --git a/examples/views/docs/component/tab-bar.md b/examples/views/docs/component/tab-bar.md
index a6ae7d2..1ee242d 100644
--- a/examples/views/docs/component/tab-bar.md
+++ b/examples/views/docs/component/tab-bar.md
@@ -1,12 +1,8 @@
 # TabBar 标签栏
 
-说明
-
 ## 基础用法
 
-说明
-
-::: snippet 示例
+::: snippet 设置`items`配置标签项
 
 ```html
 <template>
@@ -33,4 +29,19 @@ export default {
 </style>
 ```
 
-:::
\ No newline at end of file
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value | 值 | String, Number | - | -
+items | 标签项 | Array | - | []
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+change | 切换标签项 | 名称, 数据, 下标
\ No newline at end of file
diff --git a/packages/loading/index.css b/packages/loading/index.css
index ce3512a..94a1542 100644
--- a/packages/loading/index.css
+++ b/packages/loading/index.css
@@ -3,6 +3,7 @@
   color: #c8c9cc;
   font-size: 0;
   vertical-align: middle;
+  display: inline-block;
 }
 .zui-loading__spinner {
   position: relative;
diff --git a/packages/navBar/index.css b/packages/navBar/index.css
index 62721d8..726a216 100644
--- a/packages/navBar/index.css
+++ b/packages/navBar/index.css
@@ -23,7 +23,7 @@
   content: '';
   position: absolute;
   left: 0;
-  top: 0;
+  bottom: 0;
   background: #E2E4EA;
   right: 0;
   height: 1px;
diff --git a/packages/popup/index.vue b/packages/popup/index.vue
index aeed2e0..1252253 100644
--- a/packages/popup/index.vue
+++ b/packages/popup/index.vue
@@ -51,18 +51,15 @@ export default {
       default: function() {
         switch (this.position) {
           case 'bottom':
-            return 'md-slide-up'
-          /* istanbul ignore next */
+            return 'zui-slide-up'
           case 'top':
-            return 'md-slide-down'
-          /* istanbul ignore next */
+            return 'zui-slide-down'
           case 'left':
-            return 'md-slide-right'
-          /* istanbul ignore next */
+            return 'zui-slide-right'
           case 'right':
-            return 'md-slide-left'
+            return 'zui-slide-left'
           default:
-            return 'md-fade' // fade/fade-bounce/fade-slide/fade-zoom
+            return 'zui-fade'
         }
       },
     },
@@ -164,8 +161,8 @@ export default {
     },
     $_preventScroll: function(isBind) {
       const handler = isBind ? 'addEventListener' : 'removeEventListener'
-      const masker = this.$el.querySelector('.md-popup-mask')
-      const boxer = this.$el.querySelector('.md-popup-box')
+      const masker = this.$el.querySelector('.zui-popup-mask')
+      const boxer = this.$el.querySelector('.zui-popup-box')
       masker && masker[handler]('touchmove', this.$_preventDefault, false)
       boxer && boxer[handler]('touchmove', this.$_preventDefault, false)
       this.$_preventScrollExclude(isBind)
--
libgit2 0.21.0