[Improvement] Tab: add title slot (#603)

docs/demos/views/tab.vue

@@ -47,6 +47,17 @@
         </van-tab>
       </van-tabs>
     </demo-block>
+
+    <demo-block :title="$t('title7')">
+      <van-tabs :active="active">
+        <van-tab v-for="index in 2" :key="index">
+          <div slot="title">
+            <van-icon name="more-o" />{{ $t('tab') }}
+          </div>
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -59,7 +70,8 @@ export default {
       title3: '禁用标签',
       title4: '样式风格',
       title5: '点击事件',
-      title6: '粘性布局'
+      title6: '粘性布局',
+      title7: '自定义标签'
     },
     'en-US': {
       tab: 'Tab ',
@@ -68,7 +80,8 @@ export default {
       title3: 'Disabled Tab',
       title4: 'Card Style',
       title5: 'Click Event',
-      title6: 'Sticky'
+      title6: 'Sticky',
+      title7: 'Custom Tab'
     }
   },
 
@@ -79,12 +92,6 @@ export default {
     };
   },
 
-  mounted() {
-    setTimeout(() => {
-      this.active = 3;
-    }, 1000);
-  },
-
   methods: {
     onClickDisabled() {
       Toast('Disabled!');
@@ -101,6 +108,11 @@ export default {
 .demo-tab {
   margin-bottom: 700px;
 
+  .van-tab .van-icon {
+    margin-right: 5px;
+    vertical-align: -2px;
+  }
+
   .van-tab__pane {
     background-color: #fff;
     padding: 20px;

docs/markdown/en-US/tab.md

@@ -105,8 +105,22 @@ In sticky mode, the tab will be fixed to top when scroll to top
 
 ```html
 <van-tabs :active="active" sticky>
-  <van-tab v-for="index in 4" :title="'选项 ' + index">
-    内容 {{ index }}
+  <van-tab v-for="index in 4" :title="'tab ' + index">
+    content {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+#### Custom title
+Use title slot to custom tab title
+
+```html
+<van-tabs :active="active">
+  <van-tab v-for="index in 2">
+    <div slot="title">
+      <van-icon name="more-o" />tab
+    </div>
+    content {{ index }}
   </van-tab>
 </van-tabs>
 ```
@@ -127,6 +141,13 @@ In sticky mode, the tab will be fixed to top when scroll to top
 | title | Tab title | `String` | - | - |
 | disabled | Whether disabled current tab | `Boolean` | `false` | - |
 
+### Tab Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Content |
+| title | Custom tab |
+
 ### Tabs Event
 
 | Event | Description | Arguments |

docs/markdown/zh-CN/tab.md

@@ -111,6 +111,20 @@ export default {
 </van-tabs>
 ```
 
+#### 自定义标签
+通过 title slot 可以自定义标签内容
+
+```html
+<van-tabs :active="active">
+  <van-tab v-for="index in 2">
+    <div slot="title">
+      <van-icon name="more-o" />选项
+    </div>
+    内容 {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
 ### Tabs API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选 |
@@ -128,6 +142,13 @@ export default {
 | title | tab的标题 | `String` | - | - |
 | disabled | 是否禁用这个tab | `Boolean` | `false` | - |
 
+### Tab Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| - | 标签页内容 |
+| title | 自定义标签 |
+
 ### Tabs Event
 
 | 事件名 | 说明 | 参数 |