docs(Button): add gradient color demo (#4454)

src/button/README.md

@@ -84,8 +84,9 @@ Vue.use(Button);
 ### Custom Color
 
 ```html
-<van-button color="#7232dd">Custom Color</van-button>
-<van-button color="#7232dd" plain>Custom Color</van-button>
+<van-button color="#7232dd">Pure</van-button>
+<van-button color="#7232dd" plain>Pure</van-button>
+<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</van-button>
 ```
 
 ## API

src/button/README.zh-CN.md

@@ -104,8 +104,9 @@ Vue.use(Button);
 通过`color`属性可以自定义按钮的颜色
 
 ```html
-<van-button color="#7232dd">自定义颜色</van-button>
-<van-button color="#7232dd" plain>自定义颜色</van-button>
+<van-button color="#7232dd">单色按钮</van-button>
+<van-button color="#7232dd" plain>单色按钮</van-button>
+<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
 ```
 
 ## API

src/button/demo/index.vue

@@ -60,8 +60,9 @@
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-button color="#7232dd" :text="$t('customColor')" />
-      <van-button plain color="#7232dd" :text="$t('customColor')" />
+      <van-button color="#7232dd" :text="$t('pure')" />
+      <van-button plain color="#7232dd" :text="$t('pure')" />
+      <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" :text="$t('gradient')" />
     </demo-block>
   </demo-section>
 </template>
@@ -93,7 +94,9 @@ export default {
       router: '页面导航',
       urlRoute: 'URL 跳转',
       vueRoute: '路由跳转',
-      customColor: '自定义颜色'
+      customColor: '自定义颜色',
+      pure: '单色按钮',
+      gradient: '渐变色按钮'
     },
     'en-US': {
       type: 'Type',
@@ -119,7 +122,9 @@ export default {
       router: 'Router',
       urlRoute: 'URL',
       vueRoute: 'Vue Router',
-      customColor: 'Custom Color'
+      customColor: 'Custom Color',
+      pure: 'Pure',
+      gradient: 'Gradient'
     }
   }
 };

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

@@ -24,6 +24,6 @@ exports[`renders demo correctly 1`] = `
       </i><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><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</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--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">自定义颜色</span></button></div>
+  <div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;"><span class="van-button__text">渐变色按钮</span></button></div>
 </div>
 `;

src/circle/README.md

@@ -76,8 +76,8 @@ export default {
     return {
       currentRate: 0,
       gradientColor: {
-        '0%': '#ffd01e',
-        '100%': '#ee0a24'
+        '0%': '#3fecff',
+        '100%': '#6149f6'
       }
     };
   }

src/circle/README.zh-CN.md

@@ -84,8 +84,8 @@ export default {
     return {
       currentRate: 0,
       gradientColor: {
-        '0%': '#ffd01e',
-        '100%': '#ee0a24'
+        '0%': '#3fecff',
+        '100%': '#6149f6'
       }
     };
   }

src/circle/demo/index.vue

@@ -105,8 +105,8 @@ export default {
       currentRate3: 70,
       currentRate4: 70,
       gradientColor: {
-        '0%': '#ffd01e',
-        '100%': '#ee0a24'
+        '0%': '#3fecff',
+        '100%': '#6149f6'
       }
     };
   },

src/circle/test/__snapshots__/demo.spec.js.snap

@@ -26,8 +26,8 @@ exports[`renders demo correctly 1`] = `
     <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
         <defs>
           <linearGradient id="van-circle-gradient-3" x1="100%" y1="0%" x2="0%" y2="0%">
-            <stop offset="0%" stop-color="#ffd01e"></stop>
-            <stop offset="100%" stop-color="#ee0a24"></stop>
+            <stop offset="0%" stop-color="#3fecff"></stop>
+            <stop offset="100%" stop-color="#6149f6"></stop>
           </linearGradient>
         </defs>
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>