[Doc] beautify demo

README.md

@@ -24,7 +24,7 @@
 
 ## Features
 
-* 50+ Reusable components
+* 55+ Reusable components
 * 90% Unit test coverage
 * Extensive documentation and demos
 * Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

README.zh-CN.md

@@ -23,7 +23,7 @@
 
 ## 特性
 
-* 50+ 个组件
+* 55+ 个组件
 * 90% 单元测试覆盖率
 * 完善的中英文文档和示例
 * 支持按需引入

docs/markdown/intro.en-US.md

@@ -8,7 +8,7 @@
 
 ### Features
 
-* 50+ Reusable components
+* 55+ Reusable components
 * 90% Unit test coverage
 * Extensive documentation and demos
 * Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

docs/markdown/intro.zh-CN.md

@@ -8,7 +8,7 @@
  
 ### 特性
 
-* 50+ 个组件
+* 55+ 个组件
 * 90% 单元测试覆盖率
 * 完善的中英文文档和示例
 * 支持按需引入

packages/action-sheet/demo/index.vue

@@ -1,7 +1,12 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button @click="show1 = true">{{ $t('buttonText') }}</van-button>
+      <van-button
+        type="primary"
+        @click="show1 = true"
+      >
+        {{ $t('buttonText') }}
+      </van-button>
       <van-action-sheet
         v-model="show1"
         :actions="simpleActions"
@@ -10,7 +15,12 @@
     </demo-block>
 
     <demo-block :title="$t('status')">
-      <van-button @click="show2 = true">{{ $t('buttonText') }}</van-button>
+      <van-button
+        type="primary"
+        @click="show2 = true"
+      >
+        {{ $t('buttonText') }}
+      </van-button>
       <van-action-sheet
         v-model="show2"
         :actions="statusActions"
@@ -19,7 +29,12 @@
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-button @click="show3 = true">{{ $t('buttonText') }}</van-button>
+      <van-button
+        type="primary"
+        @click="show3 = true"
+      >
+        {{ $t('buttonText') }}
+      </van-button>
       <van-action-sheet
         v-model="show3"
         :actions="simpleActions"
@@ -30,7 +45,12 @@
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-button @click="show4 = true">{{ $t('buttonText') }}</van-button>
+      <van-button
+        type="primary"
+        @click="show4 = true"
+      >
+        {{ $t('buttonText') }}
+      </van-button>
       <van-action-sheet
         v-model="show4"
         :title="$t('title')"
@@ -104,7 +124,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-action-sheet {
+  background-color: @white;
+
   .van-button {
     margin-left: 15px;
   }

packages/action-sheet/test/__snapshots__/demo.spec.js.snap

@@ -2,16 +2,24 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出菜单</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出菜单
+    </span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出菜单</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出菜单
+    </span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出菜单</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出菜单
+    </span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出菜单</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出菜单
+    </span></button>
     <!---->
   </div>
 </div>

packages/button/demo/index.vue

@@ -78,10 +78,30 @@
     </demo-block>
 
     <demo-block :title="$t('size')">
-      <van-button size="large">{{ $t('large') }}</van-button>
+      <van-button
-      <van-button size="normal">{{ $t('normal') }}</van-button>
+        type="primary"
-      <van-button size="small">{{ $t('small') }}</van-button>
+        size="large"
-      <van-button size="mini">{{ $t('mini') }}</van-button>
+      >
+        {{ $t('large') }}
+      </van-button>
+      <van-button
+        type="primary"
+        size="normal"
+      >
+        {{ $t('normal') }}
+      </van-button>
+      <van-button
+        type="primary"
+        size="small"
+      >
+        {{ $t('small') }}
+      </van-button>
+      <van-button
+        type="primary"
+        size="mini"
+      >
+        {{ $t('mini') }}
+      </van-button>
     </demo-block>
   </demo-section>
 </template>

packages/button/en-US.md

@@ -63,10 +63,10 @@ Vue.use(Button);
 ### Size
 
 ```html 
-<van-button size="large">Large</van-button>
+<van-button type="primary" size="large">Large</van-button>
-<van-button size="normal">Normal</van-button>
+<van-button type="primary" size="normal">Normal</van-button>
-<van-button size="small">Small</van-button>
+<van-button type="primary" size="small">Small</van-button>
-<van-button size="mini">Mini</van-button>
+<van-button type="primary" size="mini">Mini</van-button>
 ```
 
 ## API

packages/button/test/__snapshots__/demo.spec.js.snap

@@ -14,6 +14,14 @@ exports[`renders demo correctly 1`] = `
       <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__loading-text">加载中...</span>
     </button></div>
   <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
-  <div><button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
+  <div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">
+      大号按钮
+    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      普通按钮
+    </span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">
+      小型按钮
+    </span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">
+      迷你按钮
+    </span></button></div>
 </div>
 `;

packages/button/zh-CN.md

@@ -73,10 +73,10 @@ Vue.use(Button);
 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
 
 ```html 
-<van-button size="large">大号按钮</van-button>
+<van-button type="primary" size="large">大号按钮</van-button>
-<van-button size="normal">普通按钮</van-button>
+<van-button type="primary" size="normal">普通按钮</van-button>
-<van-button size="small">小型按钮</van-button>
+<van-button type="primary" size="small">小型按钮</van-button>
-<van-button size="mini">迷你按钮</van-button>
+<van-button type="primary" size="mini">迷你按钮</van-button>
 ```
 
 ## API

packages/checkbox/demo/index.vue

@@ -143,6 +143,10 @@ export default {
   }
 
   .van-cell {
+    &__value {
+      flex: none;
+    }
+
     .van-checkbox {
       margin: 0;
     }

packages/dialog/demo/index.vue

@@ -3,14 +3,12 @@
     <demo-block :title="$t('alert1')">
       <van-button
         type="primary"
-        plain
         @click="onClickAlert"
       >
         {{ $t('alert1') }}
       </van-button>
       <van-button
         type="primary"
-        plain
         @click="onClickAlert2"
       >
         {{ $t('alert2') }}
@@ -20,7 +18,6 @@
     <demo-block :title="$t('confirm')">
       <van-button
         type="primary"
-        plain
         @click="onClickConfirm"
       >
         {{ $t('confirm') }}
@@ -30,7 +27,6 @@
     <demo-block :title="$t('asyncClose')">
       <van-button
         type="primary"
-        plain
         @click="onClickAsyncClose"
       >
         {{ $t('asyncClose') }}
@@ -39,8 +35,7 @@
 
     <demo-block :title="$t('componentCall')">
       <van-button
-        type="danger"
+        type="primary"
-        plain
         @click="show = true"
       >
         {{ $t('componentCall') }}
@@ -126,7 +121,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-dialog {
+  background-color: @white;
+
   .van-doc-demo-block > .van-button {
     margin-left: 15px;
   }

packages/dialog/test/__snapshots__/demo.spec.js.snap

@@ -2,18 +2,18 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       提示弹窗
-    </span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
+    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       提示弹窗（无标题）
     </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       确认弹窗
     </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       异步关闭
     </span></button></div>
-  <div><button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       组件调用
     </span></button>
     <div class="van-dialog" style="display: none;" name="van-dialog-bounce">

packages/image-preview/demo/index.vue

@@ -1,19 +1,39 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button @click="showImagePreview">{{ $t('button1') }}</van-button>
+      <van-button
+        type="primary"
+        @click="showImagePreview"
+      >
+        {{ $t('button1') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('button2')">
-      <van-button @click="showImagePreview(1)">{{ $t('button2') }}</van-button>
+      <van-button
+        type="primary"
+        @click="showImagePreview(1)"
+      >
+        {{ $t('button2') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('button3')">
-      <van-button @click="showImagePreview(0, 1000)">{{ $t('button3') }}</van-button>
+      <van-button
+        type="primary"
+        @click="showImagePreview(0, 1000)"
+      >
+        {{ $t('button3') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('componentCall')">
-      <van-button @click="componentCall">{{ $t('componentCall') }}</van-button>
+      <van-button
+        type="primary"
+        @click="componentCall"
+      >
+        {{ $t('componentCall') }}
+      </van-button>
       <van-image-preview
         v-model="show"
         :images="images"
@@ -88,7 +108,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-image-preview {
+  background-color: @white;
+
   .van-button {
     margin-left: 15px;
   }

packages/lazyload/demo/index.vue

@@ -61,7 +61,7 @@ export default {
 
 <style lang="less">
 .demo-lazyload {
-  padding: 0 15px;
+  padding: 15px;
 
   img,
   div[lazy] {

packages/notify/demo/index.vue

@@ -2,6 +2,7 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-button
+        type="primary"
         :text="$t('showNotify')"
         @click="showNotify"
       />
@@ -9,6 +10,7 @@
 
     <demo-block :title="$t('customConfig')">
       <van-button
+        type="primary"
         :text="$t('showCustomNotify')"
         @click="showCustomNotify"
       />
@@ -50,7 +52,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-notify {
+  background-color: @white;
+
   .van-button {
     margin-left: 15px;
   }

packages/notify/test/__snapshots__/demo.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">显示消息通知</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">显示消息通知</span></button></div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">显示自定义消息通知</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">显示自定义消息通知</span></button></div>
 </div>
 `;

packages/number-keyboard/demo/index.vue

@@ -1,7 +1,10 @@
 <template>
   <demo-section>
     <demo-block :title="$t('default')">
-      <van-button @touchstart.stop="keyboard = 'default'">
+      <van-button
+        type="primary"
+        @touchstart.stop="keyboard = 'default'"
+      >
         {{ $t('button1') }}
       </van-button>
 
@@ -16,7 +19,10 @@
     </demo-block>
 
     <demo-block :title="$t('custom')">
-      <van-button @touchstart.stop="keyboard = 'custom'">
+      <van-button
+        type="primary"
+        @touchstart.stop="keyboard = 'custom'"
+      >
         {{ $t('button2') }}
       </van-button>
 

packages/number-keyboard/test/__snapshots__/demo.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       弹出默认键盘
     </span></button>
     <div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray">.</i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       弹出自定义键盘
     </span></button>
     <div class="van-number-keyboard van-number-keyboard--custom" style="z-index: 100; display: none;" name="van-slide-up">

packages/popup/demo/index.vue

@@ -1,12 +1,22 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
+      <van-button
+        type="primary"
+        @click="show1 = true"
+      >
+        {{ $t('button1') }}
+      </van-button>
       <van-popup v-model="show1">{{ $t('content') }}</van-popup>
     </demo-block>
 
     <demo-block :title="$t('position')">
-      <van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
+      <van-button
+        type="primary"
+        @click="show2 = true"
+      >
+        {{ $t('button2') }}
+      </van-button>
 
       <van-popup
         v-model="show2"
@@ -20,7 +30,12 @@
         />
       </van-popup>
 
-      <van-button @click="show3 = true">{{ $t('button4') }}</van-button>
+      <van-button
+        type="primary"
+        @click="show3 = true"
+      >
+        {{ $t('button4') }}
+      </van-button>
       <van-popup
         v-model="show3"
         position="top"
@@ -29,18 +44,38 @@
         {{ $t('content') }}
       </van-popup>
 
-      <van-button @click="show4 = true">{{ $t('button5') }}</van-button>
+      <van-button
+        type="primary"
+        @click="show4 = true"
+      >
+        {{ $t('button5') }}
+      </van-button>
       <van-popup
         v-model="show4"
         position="right"
       >
-        <van-button @click="show4 = false">{{ $t('button6') }}</van-button>
+        <van-button
-        <van-button @click="show5 = true">{{ $t('button5') }}</van-button>
+          type="primary"
+          @click="show4 = false"
+        >
+          {{ $t('button6') }}
+        </van-button>
+        <van-button
+          type="primary"
+          @click="show5 = true"
+        >
+          {{ $t('button5') }}
+        </van-button>
         <van-popup
           v-model="show5"
           position="right"
         >
-          <van-button @click="show5 = false">{{ $t('button6') }}</van-button>
+          <van-button
+            type="primary"
+            @click="show5 = false"
+          >
+            {{ $t('button6') }}
+          </van-button>
         </van-popup>
       </van-popup>
     </demo-block>

packages/popup/test/__snapshots__/demo.spec.js.snap

@@ -2,12 +2,20 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 Popup</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出 Popup
+    </span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">底部弹出</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-    <!----> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">顶部弹出</span></button>
+      底部弹出
-    <!----> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">右侧弹出</span></button>
+    </span></button>
+    <!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      顶部弹出
+    </span></button>
+    <!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      右侧弹出
+    </span></button>
     <!---->
   </div>
 </div>

packages/pull-refresh/demo/index.vue

@@ -44,7 +44,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-pull-refresh {
+  background-color: @white;
+
   .van-pull-refresh {
     &,
     &__track {

packages/radio/demo/index.vue

@@ -115,6 +115,10 @@ export default {
     }
   }
 
+  .van-cell__value {
+    flex: none;
+  }
+
   img {
     height: 20px;
   }

packages/sku/demo/index.vue

@@ -226,7 +226,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-sku {
+  background-color: @white;
+
   .sku-container {
     padding: 0 15px;
   }

packages/toast/demo/index.vue

@@ -1,21 +1,51 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-button @click="$toast($t('text'))">{{ $t('title1') }}</van-button>
+      <van-button
-      <van-button @click="$toast($t('longText'))">{{ $t('longTextButton') }}</van-button>
+        type="primary"
+        @click="$toast($t('text'))"
+      >
+        {{ $t('title1') }}
+      </van-button>
+      <van-button
+        type="primary"
+        @click="$toast($t('longText'))"
+      >
+        {{ $t('longTextButton') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-button @click="showLoadingToast">{{ $t('title2') }}</van-button>
+      <van-button
+        type="primary"
+        @click="showLoadingToast"
+      >
+        {{ $t('title2') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-button @click="showSuccessToast">{{ $t('success') }}</van-button>
+      <van-button
-      <van-button @click="showFailToast">{{ $t('fail') }}</van-button>
+        type="info"
+        @click="showSuccessToast"
+      >
+        {{ $t('success') }}
+      </van-button>
+      <van-button
+        type="danger"
+        @click="showFailToast"
+      >
+        {{ $t('fail') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-button @click="showCustomizedToast">{{ $t('advancedUsage') }}</van-button>
+      <van-button
+        type="primary"
+        @click="showCustomizedToast"
+      >
+        {{ $t('advancedUsage') }}
+      </van-button>
     </demo-block>
   </demo-section>
 </template>
@@ -88,7 +118,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-toast {
+  background-color: @white;
+
   .van-button {
     margin-left: 15px;
   }

packages/toast/test/__snapshots__/demo.spec.js.snap

@@ -2,9 +2,21 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">文字提示</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">长文字提示</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">加载提示</span></button></div>
+      文字提示
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">成功提示</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">失败提示</span></button></div>
+    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">高级用法</span></button></div>
+      长文字提示
+    </span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      加载提示
+    </span></button></div>
+  <div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
+      成功提示
+    </span></button> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">
+      失败提示
+    </span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      高级用法
+    </span></button></div>
 </div>
 `;