build docs

docs/components/demo-block.vue

@@ -4,11 +4,17 @@
     :class="blockClass">
     <slot name="examples"></slot>
     <div class="highlight-wrapper">
-      <!-- <div class="highlight-toggle">
+      <div class="highlight-toggle">
         <span v-text="description"></span>
-      </div> -->
+        <i class="zan-icon zan-icon-arrow" @click="showCode = !showCode" :class="{
-      <slot name="highlight">
+          'zan-icon-arrow-close': !showCode
-      </slot>
+        }">
+        </i>
+      </div>
+      <div class="highlight-code" v-show="showCode">
+        <slot name="highlight">
+        </slot>
+      </div>
     </div>
   </div>
 </template>
@@ -19,6 +25,12 @@ export default {
     description: String
   },
 
+  data() {
+    return {
+      showCode: true
+    };
+  },
+
   computed: {
     blockClass() {
       return `demo-${this.$route.path.split('/').pop()}`;
@@ -39,6 +51,7 @@ export default {
   .demo-block {
     transition: .2s;
     overflow: hidden;
+    margin-bottom: 20px;
 
     code {
       font-family: Menlo, Monaco, Consolas, Courier, monospace;
@@ -84,6 +97,27 @@ export default {
       padding: 20px;
       border-bottom: 1px solid #e5e5e5;
       color: #666;
+      position: relative;
+
+      .zan-icon {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        font-size: 12px;
+        color: #888;
+        transform: rotate(-90deg);
+        border: 2px solid #888;
+        border-radius: 50%;
+        cursor: pointer;
+
+        &.zan-icon-arrow-close {
+          transform: rotate(90deg);
+        }
+      }
     }
   }
 </style>

docs/examples-dist/button.vue

@@ -1,4 +1,4 @@
-<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能">
+<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能，只接受primary, default, danger三种类型，默认default。">
                 <zan-row>
   <zan-col span="24">
     <zan-button block="">default</zan-button>
@@ -18,7 +18,7 @@
   </zan-col>
 </zan-row>
 
-              </example-block><example-block title="按钮尺寸">
+              </example-block><example-block title="按钮尺寸，只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。">
                 <zan-row>
   <zan-col span="24">
     <zan-button size="large">large</zan-button>
@@ -36,7 +36,7 @@
   </zan-col>
 </zan-row>
 
-              </example-block><example-block title="自定义按钮标签">
+              </example-block><example-block title="自定义按钮标签，按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。">
                 <zan-row>
   <zan-col span="24">
     <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>

docs/examples-docs/button.md

@@ -17,11 +17,13 @@
 
 ## Button 按钮
 
-### 按钮功能
+### 使用指南
 
-只接受`primary`, `default`, `danger`三种类型，默认`default`。
+一些使用指南。
 
-:::demo 按钮功能
+### 代码示例
+
+:::demo 按钮功能，只接受primary, default, danger三种类型，默认default。
 ```html
 <zan-row>
   <zan-col span="24">
@@ -37,8 +39,6 @@
 ```
 :::
 
-### 禁用状态
-
 :::demo 禁用状态
 ```html
 <zan-row>
@@ -49,11 +49,7 @@
 ```
 :::
 
-### 按钮尺寸
+:::demo 按钮尺寸，只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。
-
-只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。
-
-:::demo 按钮尺寸
 ```html 
 <zan-row>
   <zan-col span="24">
@@ -74,11 +70,7 @@
 ```
 :::
 
-### 自定义按钮标签
+:::demo 自定义按钮标签，按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
-
-按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
-
-:::demo 自定义按钮标签
 ```html 
 <zan-row>
   <zan-col span="24">
@@ -88,10 +80,6 @@
 ```
 :::
 
-### loading按钮
-
-表示`loading`状态
-
 :::demo loading按钮
 ```html 
 <zan-row>
@@ -105,10 +93,6 @@
 ```
 :::
 
-### button group
-
-一组按钮。
-
 :::demo button group
 ```html 
 <div class="button-group">