From a8738bbcae2a885f42efc9cb4af878ea6479e872 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sun, 5 May 2019 11:40:59 +0800
Subject: [PATCH] [Doc] Tabbar: update demo

---
 packages/tabbar/demo/index.vue                | 18 +++++++++--
 packages/tabbar/en-US.md                      | 19 ++++++++---
 .../test/__snapshots__/demo.spec.js.snap      | 32 +++++++++++++++++++
 packages/tabbar/zh-CN.md                      | 16 ++++++++--
 4 files changed, 75 insertions(+), 10 deletions(-)

diff --git a/packages/tabbar/demo/index.vue b/packages/tabbar/demo/index.vue
index 7c0552fd4..c18661944 100644
--- a/packages/tabbar/demo/index.vue
+++ b/packages/tabbar/demo/index.vue
@@ -2,6 +2,15 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-tabbar v-model="active">
+        <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+
+    <demo-block :title="$t('badge')">
+      <van-tabbar v-model="active2">
         <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
         <van-tabbar-item
           icon="search"
@@ -25,7 +34,7 @@
     </demo-block>
 
     <demo-block :title="$t('customIcon')">
-      <van-tabbar v-model="active2">
+      <van-tabbar v-model="active3">
         <van-tabbar-item info="3">
           <span>{{ $t('custom') }}</span>
           <img
@@ -41,7 +50,7 @@
 
     <demo-block :title="$t('customColor')">
       <van-tabbar
-        v-model="active3"
+        v-model="active4"
         active-color="#07c160"
         inactive-color="#000"
       >
@@ -58,11 +67,13 @@
 export default {
   i18n: {
     'zh-CN': {
+      badge: '显示徽标',
       customIcon: '自定义图标',
       customColor: '自定义颜色'
     },
     'en-US': {
-      customIcon: 'Custom icon',
+      badge: 'Show Badge',
+      customIcon: 'Custom Icon',
       customColor: 'Custom Color'
     }
   },
@@ -72,6 +83,7 @@ export default {
       active: 0,
       active2: 0,
       active3: 0,
+      active4: 0,
       icon: {
         normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
         active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
diff --git a/packages/tabbar/en-US.md b/packages/tabbar/en-US.md
index d25968528..1b4938a8b 100644
--- a/packages/tabbar/en-US.md
+++ b/packages/tabbar/en-US.md
@@ -14,9 +14,9 @@ Vue.use(Tabbar).use(TabbarItem);
 ```html
 <van-tabbar v-model="active">
   <van-tabbar-item icon="home-o">Tab</van-tabbar-item>
-  <van-tabbar-item icon="search" dot>Tab</van-tabbar-item>
-  <van-tabbar-item icon="friends-o" info="5">Tab</van-tabbar-item>
-  <van-tabbar-item icon="setting-o" info="20">Tab</van-tabbar-item>
+  <van-tabbar-item icon="search">Tab</van-tabbar-item>
+  <van-tabbar-item icon="friends-o">Tab</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>
 </van-tabbar>
 ```
 
@@ -30,7 +30,18 @@ export default {
 }
 ```
 
-#### Custom icon
+#### Show Badge
+
+```html
+<van-tabbar v-model="active">
+  <van-tabbar-item icon="home-o">Tab</van-tabbar-item>
+  <van-tabbar-item icon="search" dot>Tab</van-tabbar-item>
+  <van-tabbar-item icon="friends-o" info="5">Tab</van-tabbar-item>
+  <van-tabbar-item icon="setting-o" info="20">Tab</van-tabbar-item>
+</van-tabbar>
+```
+
+#### Custom Icon
 
 Use `icon` slot to custom icon
 
diff --git a/packages/tabbar/test/__snapshots__/demo.spec.js.snap b/packages/tabbar/test/__snapshots__/demo.spec.js.snap
index b933c13f1..6d6ccc52d 100644
--- a/packages/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -2,6 +2,38 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
+  <div>
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
+      <div class="van-tabbar-item">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签</div>
+      </div>
+      <div class="van-tabbar-item">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签</div>
+      </div>
+      <div class="van-tabbar-item">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签</div>
+      </div>
+      <div class="van-tabbar-item">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签</div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
       <div class="van-tabbar-item">
diff --git a/packages/tabbar/zh-CN.md b/packages/tabbar/zh-CN.md
index 7bbb3e7c9..e54c30101 100644
--- a/packages/tabbar/zh-CN.md
+++ b/packages/tabbar/zh-CN.md
@@ -14,9 +14,9 @@ Vue.use(Tabbar).use(TabbarItem);
 ```html
 <van-tabbar v-model="active">
   <van-tabbar-item icon="home-o">标签</van-tabbar-item>
-  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
-  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
-  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
+  <van-tabbar-item icon="search">标签</van-tabbar-item>
+  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
 </van-tabbar>
 ```
 
@@ -30,6 +30,16 @@ export default {
 }
 ```
 
+#### 显示徽标
+
+```html
+<van-tabbar v-model="active">
+  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
+  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
+  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
+  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
+</van-tabbar>
+```
 
 #### 自定义图标